CSS3 - Pseudoklassen

1. Das Wichtigste vorab

Wer sich darüber gewundert hat, wie gut selbst der Internet Explorer 7 mit den neuen Möglichkeiten bei den Attributselektoren umgehen kann, dachte vielleicht, OK dann wird der 8er wenigstens ein paar weitere CSS3-Geschichten kennen. Denkste. Ab hier ist nämlich schon Schluss. Erst der IE 9 kommt damit klar. Und selbst bei dem gibt es noch die eine oder andere Lücke.

2. Was ist mit den Pseudoelementen

Davon gibt es meines Wissens nach nur eine Neuerung, nämlich selection. Und ebenfalls neu ist, dass man da jetzt mit zwei Doppelpunkten arbeiten muss, also dem schon allseits bekannten Paamayim Nekudotayim. Das gilt allerdings aus Gründen der Abwärtskompatibilität nicht für die Pseudoelemente aus CCS2.

selection

• 12.x
• 5.1
• 23.0
• 10.0

Gilt für vom User markierten Text. Macht das hier mal mit einem beliebigen Absatz.

p::selection {
  color: #f00;
  background: #fff;
}
// Firefox
p::-moz-selection {
  color: #f00;
  background: #fff;
}

3. Allgemeine Pseudoklassen

Naja, dazu zähle ich einfach die drei, die ich nicht in den folgenden Unterpunkten unterbringen konnte.

empty

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Meiner Meinung nach eine ziemlich überflüssige Sache. Damit kann man leere Elemente optisch hervorheben. Warum wissen wohl nur die Götter des W3C. Mir jedenfalls fällt kein Grund ein. Außerdem nölt da jeder HTML-Validator rum, weil das Teil leer ist. Und wer sich jetzt denkt, dass man das doch gut bei Formularen einsetzen könnte, den muss ich enttäuschen. Denn genau da funktioniert es nicht, weil alle Elemente außer der <textarea> im Sinne dieser Pseudoklasse immer leer sind. Oder auch nicht, je nach Sichtweise. Außerdem klappt das Ganze nur, wenn wirklich nichts, aber auch gar nichts in dem entsprechenden Tag ist. Ein Leerzeichen reicht völlig aus, damit das nicht mehr greift.

p:empty {
  border: 1px solid #f00;
  height: 20px;
}
<p></p>

not

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

Damit kann man wunderbar auf Elemente zugreifen, bei denen ein Ausschlusskriterium gilt. Als Parameter wird ein beliebiger Selektor (ohne Anführungszeichen) angegeben. Details dazu kommen später in den angekündigten Tutorials.

ul.example-not li:not(.blubb) {
  color: #f00;
}
<ul class="example-not">
  <li>Normale Aufzählung ohne Klasse <code>blubb</code></li>
  <li class="blubb">Aufzählung mit Klasse <code>blubb</code></li>
  <li>Normale Aufzählung ohne Klasse <code>blubb</code></li>
  <li class="blubb">Aufzählung mit Klasse <code>blubb</code></li>
</ul>

ul.example-not a:not([target="_blank"]) {
  color: #f00;
}
<ul class="example-not">
  <li><a href="#" target="_blank">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>

target

• 18.0
• 12.x
• 5.1
• 23.0
• 10.0

Das bezieht sich nicht(!) auf das gleichnamige Attribut bei Links sondern gilt für Sprungmarken, die über eine URL(!) angesteuert werden. Dabei ist es lattens, ob die Sprungmarke nun per id oder name gekennzeichnet wurde. Auch wenn man bei HTML5 nicht mehr mit Letzterem arbeiten sollte. Der vergebene Name spielt auch keine Rolle, da der pro Seite eh einmalig sein muss.

p#sprung:target{ 
  border: 1px solid #f00;
  padding: 3px;
}
<p id="sprung">Test</p>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt