Nützliche CSS Selektoren die man kaum benutzt

Hier möchte ich ein paar nützliche CSS-Selektoren vorstellen die meines Erachtens relativ selten Verwendung finden aber an der einen oder anderen Stelle durchaus sehr nützlich und hilfreich seien können. Einige dieser CSS-Selektoren gibt es dabei schon seit der Version CSS1, es geht hier also nicht um neue Selektoren, sondern einfach nur um einen sinnvollen Einsatz der bisherigen Möglichkeiten.

Attribut-Selektor

Seit CSS2 kann man HTML-Elemente nicht nur über die Klasse oder ID per CSS selektieren, sondern auch über ein Attribut. Hierbei kann man zum einen das Vorkommen eines Attributes als Selektor verwenden, oder auf einen fest definierten Wert oder auch auf eine Zeichenkette als Wert des Attributes eingehen. Der Selektor ist hierbei anders als Klassen- und ID-Selektoren nicht case-sensitiv.

/* Beispiele für den Attribut-Selektor */
 
/* Attribut 'href' ist gesetzt */
a[href] {cursor: pointer;}
 
/* Attribut 'href' beginnt mit der Zeichenkette 'http://' */
a[href^='http://'] {color: red;}
 
/* Attribut 'class' beinhaltet die Zeichenkette 'icon' */
span[class*='icon'] {padding-left: 30px;}
 
/* Attribut 'href' endet mit der Zeichenkette '.jpg' */
a[href$=".jpg"] {color: lime;}

:not(selector)

Der not-Selektor macht eigentlich genau das was der Name schon sagt. Er selektiert das Element, welches nicht dem angegebenen Selektor in den Klammern entspricht.

/* Beispiele für den :not(selector) */
 
/* Attribut gesetzt */
p:not(.error) {color: #333;}

Element + Element

Mit dem + Selektor selektiert man jedes Element welches direkt nach dem zuerst angegebenen Element steht.

/* Beispiele für + Selektor */
 
/* Jeder paragraph der direktes Kind eine DIVs ist */
div + p {color: orange;}

:first-child Selektor

Mit :first-child selektiert man das erste Element seines Eltern-Elements. Dieser Selektor ist beispielsweise sehr nützlich für gestylte Listen, und er wird im Gegensatz zu :last-child auch vom Internet Explorer 7 unterstützt.

/* Beispiele für :first-child Selektor */
 
/* Das erste Listenelement von '.nav' */
.nav li:first-child {border-top: none;}