CSS Attribut Selektor

img[src$=".jpg"]

In diesem Beispiel wird ein Attribut Selektor mit Wert eingesetzt. Der Wert wird auf eine Endung überprüft. In diesem Beispiele werden somit alle img Elemente mit dem Attribut src dessen Wert auf .jpg endet ausgewählt. Das bedeutet es werden alle eingebundenen jpg Bilder ausgwählt. Es werden aber nicht die png Bilder ausewählt. Desweiteren habe ich auf gleiche Art die Bilder mit Endung gif selektiert.

Die Photos sind Bilder mit der Endung jpg. Die betenden Hände sind ein Bild mit Endung .gif. Für beide Arten von Bildern habe ich einen Attribut Selektor definiert. Die Photos oder jpg- Bilder haben ein padding, Hintergrundfarbe und border und die gif Bilder werdern links gefloatet.

Das macht erst dann richtig Sinn, wenn es sehr viele Bilder sind. Überhaupt gibt es diese vielfältigen Arten von Selektoren, um auf id und class Attribute verzichten zu können. Dadurch hat man weniger Arbeit und der HTML Code wird nicht mit Attributen versehen, der keine semantische Bedeutung haben.

Aber auch die anderen Attribut Selektoren, die Teile des Wertes ermitteln lassen sich wunderbar einsetzen, um beispielsweise Bildergalerien anzusprechen. So könnte man alle Bilder die im alt Attribut eine immer wiederkehrende Zeichenfolge haben ermitteln.
Der Selektor für ein Bild mit der Endung jpg sieht folgendermaßen aus:

img[src$=".jpg"] {padding: 2em;}

Hier geht es zum CSS3 Tipp Attribut- Selektoren