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;
}
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
- 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.
Beispiel 1
Ein leerer Absatz. Wie ich schon sagte, ziemlich sinnfrei.
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.
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
- 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.
Beispiel
Klickt einfach mal auf diesen Link, schaut dann auf die URL und danach auf den folgenden Text.
Test
p#sprung:target{
border: 1px solid #f00;
padding: 3px;
}
<p id="sprung">Test</p>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt