Mittwoch, 13. April 2011

CSS Child Selector vs Descendant Selector

Auf meine Weg zum CSS Zealot hab ich heute folgendes gelernt den unterschied zwischen Child (Kind) und Descendant (Nachfahre) Selector gelernt. Der Child Selector wählt nur die direkten Nachfahren aus, der Descendant Selector wählt in beliebiger Tiefe aus.
Beim Child Selector werden die Selektoren mit einem größer zeichen getrennt, beim Desendant Selektor einfach hintereinander geschrieben.

Ein Beispiel für Child Selector:

table > tbody > tr
{
...
}

Hier werden nur die tr-Tags ausgewählt die sich direkt unterhalb eines tbody-Tags befinden.
Also die tr hier wird nicht ausgewählt:

<table><tr>...</tr></table>

Ein Beispiel für Descendant Selector:

div span
{
...
}

Hier werden alle span-Tags ausgewählt die sich innerhalb eines div-Tags befinden. Egal in welcher Verschachtelungstiefe. Hier werden also beide span-Tags ausgewählt:

<div><span><span>...</span></span></div>

Keine Kommentare:

Kommentar veröffentlichen