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 pTag rosa eingefärbt, wenn der p Tag nach einem h4Tag in einen div Tag der nicht die class="home" hat, steht. Adjacent Element (+) bezeichnet das danebenliegende Element.

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!