CSS3

Selektoren

Selektoren nth(x)

Mit den nth(x) Selektoren ist es nicht mehr erforderlich für jedes einzelne Element eine eigene Klasse zu erzeugen, beispielsweise in Listen, sondern man kann Kind Elmente des übergeordneten Elements gezielt ansprechen:

E:nth-child(x)

E steht für das Element beispielsweise für ein list Element

li:nth-child(x)

Vom übergeordneten Element des list Elements aus, kann man nun alle Kindelemente ansprechen. Das bedeutet. Das übergeordnete Element eines List Elements ist beispielsweise das<ul> oder <ol> Element. Die Kindelemente davon sind in der Regel die <li> Listelemente. Es könnten aber auch andere Elemente von einem anderen Typ sein.
Die einzelnen Kindelemente lassen sich auf verschieden Weise ansprechen. Das naheliegendste ist die Durchnummerierung, die hier (ungewohnterweise) bei 1 beginnt.

li:nth-child(1) spricht somit das erste Element an.

siehe Beispiel

<style type="text/css">

li:nth-child(1){
color:red;
}

</style>

Es lassen sich hier 2 Schlüsselworte einsetzen
even gerade Zahlen
odd ungerade Zahlen

siehe Beispiel

<style type="text/css">
li:nth-child(even){
color:red;
}
li:nth-child(odd){
color:green;
}
</style>

Desweiteren gibt es das (an+b). Das bedeutet ab dem bten Element jedes weitere ate Element. Also. li:nth-child(2n+3) bedeutet, ab dem dritten jedes weitere 2te, das wäre das dritte, sowie das fünfte, siebte, neunte etc.

 

siehe Beispiel

<style type="text/css">

li:nth-child(2n+3){
color:red;
}


</style>

Wenn b null ist kann es weggelassen werden.

Wenn a eins ist kann es weggelassen werden.

Wenn a negativ ist, wird rückwärts gezählt.

Wenn b negativ ist, ist es ein imaginäres Element im negativen Bereich.

Weitere Pseudoklassen

E:nth-child(x) Alle Kindelemente des übergeordneten Elements
E:nth-last-child(x) vom Ende ausgehend. Eine 1 in der Klammer wählt das letzte Element aus.
E:nth-of-type(x) Alle Kindelemente des übergeordneten Elements gleichen Typs.
E:nth-of-type(x) Alle Kindelemente des übergeordneten Elements gleichen Typs, vom Ende ausgehend.

 

Im folgenden Beispiel haben wir mehrere p-Elemente und dazwischen ein h1 Element. Jedes zweite Element wird rot eingefärbt, egal ob es eine Überschrift oder ein Absatz ist.

siehe Beispiel

 

<style type="text/css">

p:nth-child(2n){
color:red;
}

</style>

Im folgenden Beispiel werden nur die Element gleichen Typs, also alle p-Elemente eingefärbt.

siehe Beispiel

<style type="text/css">

p:nth-of-type(2n){
color:red;
}

</style>

Einige mächtige CSS3 Selektoren

Sprache :lang()

Im folgenden Beispiel werden alle Elemente einer angegebenen Sprache formatiert. Die Sprachen wurden mit dem Attribut lang="de" in den Html Tags section zugewiesen. Das Attribut lang ist auch in anderen HTML Tags erlaubt.

siehe Beispiel

<style type="text/css">
:lang(de){ color:red; }
:lang(en){ color:green; }
</style>

Bedingung :not()

:not(){Eigenschaft: Wert}
:not(p){color: red;}

Hiermit wählt man alle Elemente aus, für die die angegebene Bedingung nicht zutrifft. Im obigen Beispiel werden alle Texte, die sich nicht in einem Absatz befinden rot eingefärbt. Man kann den not-Selektor auch mit anderen Selektoren kombinieren. Wie im nächsten Beispiel wo alle Links, die nicht mit der Maus berührt werden, rot dargestellt werden.

a:not(:hover){color: red;}

siehe Beispiel