zum Artikelanfang springen

Struktur-Pseudoklassen

Beispiele

Mit diesen Selektoren kann man ganz gezielt das n-te Kind eines Elternelements ansprechen.

Syntax: E:root

Beispiel:
:root {
background-color: #fc0;
}

Diese Pseudoklasse spricht das Wurzelelement einer Seite an. Da in HTML immer das html-Element das Wurzelelement ist, bewirkt diese Auszeichnung dasselbe wie

html {
background-color: #fc0;
}

Der einzige Unterschied: root hat eine höhere Spezifizität als html.

Syntax: E:nth-child(n)

Beispiel:
table tr:nth-child(2n+1){
background-color: #fff5dd;
}

Ziel: Die Zeilen einer Tabelle werden abwechselnd in unterschiedlichen Farben dargestellt („Zebra”-Tabelle).

Syntax: E:nth-last-child(n)

Beispiel:

Ziel:

Syntax: E:nth-of-type(n)

Beispiel:

Ziel:

Syntax: E:nth-last-of-type(n)

Beispiel:

Ziel:

Syntax: E:last-child

Beispiel:

Ziel:

Syntax: E:first-of-type

Beispiel:

Ziel:

Syntax: E:last-of-type

Beispiel:

Ziel:

Syntax: E:only-child

Beispiel:

Ziel:

Syntax: E:only-of-type

Beispiel:

Ziel:

Syntax: E:empty

Beispiel:
div:empty {
height: 10px;
background-color:#ff0;
outline: 1px solid #f00;
}

Spricht ein ansonsten völlig leeres („kinderloses”) <div></div> an, könnte also zum Beispiel als trennendes Schmuckelement formatiert werden.

Seitenanfang



(c) 2009 e-workers
http://www.css-cafe.de/
mailto: info@css-cafe.de