Pseudo-Klassen
Pseudo-Klassen wie nth-child, not und empty weisen CSS-Stile entsprechend ihrer Position zu und werden mit einem einzelnen Doppelpunkt angesprochen. Pseudo-Klassen stehen immer am Ende der Selektor-Kette.
Pseudo-Elemente, die den möglichen Zustand eines Elements durch einen Doppelpunkt kennzeichnen, kennen wir von ::hover und ::active. Sie sprechen auch Teile eines Textes ohne eigenes HTML-Element an, z.B. ::first-line und ::first-letter. Pseudo-Elemente können an beliebiger Stelle im Selektor stehen.
E:not(X)
Alle Elemente, die dem Selektor nicht entsprechen. Das Ausklammern mit :not(X) nimmt einen einfachen Selektor wie eine Klasse, einen ID-Selektor oder ein href-Attribut in den runden Klammern, aber keine weitere Negation, also kein weiteres not.
li:not(.mia) { background: firebrick }
Mehr zum CSS :not-Selektor
E:empty
Elemente ohne Inhalt
li:empty { background: blue }
- li
- li
- li
- li
E:last-child
wie CSS :first-child, aber filtert das letzte Kind eines Eltern-Elements
li:last-child { background: blue }
E:first-of-type, E:last-of-type
filtert das erste bzw. letzte Element dieses Typs innerhalb seines Elternelements – ist also spezifischer als first-child oder last-child.
.dbox p:first-of-type {background: orange}
<div class="dbox"> <ul> <li></li> <li></li> </ul> <p></p> <p></p> <p></p> <p></p> <div></div> <div></div> </div>
- li
- li
p
p
p
p
only-child
Elemente, die das einzige Kind ihres Elternelements sind
li:only-child {background: crimson}
<div class="dbox"> <ul> <li></li> </ul> <p></p> <p></p> <p></p> <p></p> <div></div> <div></div> </div>
only-of-type
Elemente, die das einzige Kind mit diesem Selektor innerhalb ihres Elternelements sind
p:only-of-type {background: black}
<div class="dbox"><p></p><p></p></div> <div class="dbox"><p></p></div> <div class="dbox"><p></p><p></p></div>
:last-child
CSS :first-child wurde bereits in CSS2 standardisiert, :last-child folgte erst in CSS3. Das führte dazu, dass die älteren Versionen von Internet Explorer bis einschließlich IE 8 :last-child nicht unterstützten.
last-child agiert ähnlich wie last-of-type, nur weniger spezifisch.
:empty
Der Selektor :empty filtert leere Tabellenzellen.
td:empty { background: gainsboro; }
| float | 17 | Schwebendes Element |
| clear | Zwingt das Element an den links bzw. rechten Rand | |
| top right bottom left | Position eines absolut positionierten Elements | |
| z-index | 22 | Position in der dritten Dimension |
:checked
Die Farbe von inaktiven Eingabefeldern lässt sich verändern. Checkboxen verändern ihre Position, wenn der Benutzer sie aktiviert – z.B. um aktivierte Checkboxen in einer längeren Serie von Checkboxen hervorzuheben.
HTML
<input id="rot" type="checkbox" /> <label for="rot"> Rot </label>
CSS
#name:disabled { background: gainsboro } input[type=checkbox] + label { color: firebrick; } input[type=checkbox]:checked + label { border-bottom: 1px solid green; color: green; }
