Pseudoselektoren

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"])

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. Die Definition li:after (siehe auch CSS3Pseudoelemente) setzt neben jedes Listenelement einen /Slasch. Nach den letzten Listenpunkt soll kein /Slasch angezeigt werden. Mit li:last-child wird das letzte Listenelement angesprochen, li:last-child:after, ist der Breich nach dem letzen Listenelement.

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

.countbox li:after {
	padding: 0 3px 0 5px;
	content: '/';
	color: #999;
	}
.countbox li:last-child:after {
	content: '';
	padding: 0;
	}