CSS3 Pseudoklassen
Der ::selection
Selektor
Mit dem ::selection
Selektor kann die Browser oder System Text-Highlight-Farbe mit einer Farbe deiner Wahl überschreiben werden. Hintergrund- oder/und Textfarbe können verändert werden.
::selection { background: #ff6677; color: #fff; } ::-moz-selection { background: #ff6677; color: #fff; }
Der ::selection
Selector wird von IE9+, Opera, Google Chrome und Safari unterstützt. Für Mozilla Browser braucht den -moz- Präfix.
Der :not
Selektor
Mit dem :not
Selektor können Elemente die nicht gleich sind, ausgeschlossen werden. Diese pseudo-class ist auch bekannt als negation pseudo-class.
Beispiel : Ich bin ein span ohne class / Ich bin ein span mit einer class="projekte" / Ich bin ein span ohne class
span:not(.projekte){ border:1px solid #ff6677; }
Auf einfache Weise können so auch input
Elemente ausgeschlossen werden.
input:not([type="submit"])
Hier ist wird die erste Zeile des p
Tag rosa eingefärbt, wenn der p
Tag nach einem h4
Tag in einen div
Tag der nicht die class="home"
hat, steht. Adjacent Element (+) bezeichnet das danebenliegende Element.
Ein h4 Titel
ich bin wieder mal ein lagweiliger platzhalter text. ich bin frustriert. ich habe keine richtige aussage. ich bin wieder mal ein lagweiliger platzhalter text. ich bin frustriert. ich habe keine richtige aussage.
div:not(.home) h4 + p:first-line { color: #f67; }
Das letztes Kind :last-child
Der Pseudoselektor :last-child
wählt das letzte Element einer Gruppe oder eines Bereiches.
Im folgenden Beispiel werden die Listenpunkte ( li
) mit der Anweisung display:inline;
auf eine Linie gesetzt, jedes Listenelement bekommt einen border-right
. Mit li:last-child
wird das letzte Listenelement angesprochen, diese soll keinen Border mehr haben.
- House
- Weater
- Contact
- Samples
HTML
<ul class="countbox"> <li>House</li> <li>Weater</li> <li>Contact</li> <li>Samples</li> </ul>
CSS
.countbox li { color: #999; display:inline; padding: 0 10px ; border-right: 1px solid #999; } .countbox li:last-child{ border-right:none; }
Der :empty
Selektor
- Sommer
- Somme
- Schwimmen
li:empty { border: 1px solid #f67; }
Dieses CMS entfernt leere Tags oder setzt einen nbsp rein!