Hauptmenü

Untermenü

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

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;
}

Ein wichtiger Hinweis

Früher hab ich behauptet, dass das in neueren Versionen nicht mehr funktioniert. Pustekuchen, das klappt nur nícht mehr in der Schreibweise p::selection, p::-moz-selection {...}, die ich ursprünglich benutzt habe. Wenn man wie oben im Beispiel sauber trennt, dann funktioniert das ganz hervorragend.

3. Allgemeine Pseudoklassen

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

empty

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.

Beispiel 1

Ein leerer Absatz. Wie ich schon sagte, ziemlich sinnfrei.


p:empty {
  
border1px solid #f00;
  
height20px;
}
<
p></p>

not

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.

Beispiel 1

not gilt für alle <li> ohne Klasse blubb. Bei untergeordneten Tags muss man ggf. mit einem zusätzlichen Selektor arbeiten.

  • Normale Aufzählung ohne Klasse blubb
  • Aufzählung mit Klasse blubb
  • Normale Aufzählung ohne Klasse blubb
  • Aufzählung mit Klasse blubb

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>

Beispiel 2

not gilt für alle Links, die über kein target="blank" verfügen.


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

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.

Beispiel

Klickt einfach mal auf diesen Link, schaut dann auf die URL und danach auf den folgenden Text.

Test


p#sprung:target{ 
  
border1px solid #f00;
  
padding3px;
}
<
p id="sprung">Test</p>

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