- Code: Alles auswählen
<div id="aussen">
<p>Absatz 1</p>
<div id="innen">
<p id='abab'>Absatz 4</p>
<p id='abb' style='text-decoration:underline;'>Absatz 5</p>
<p id='bab'>Absatz 6</p>
</div>
<p style='text-decoration:underline;'>Absatz 2</p>
<p>Absatz 3</p>
</div>
Absatz 1
Absatz 4
Absatz 5
Absatz 6
Absatz 2
Absatz 3
| 1.) alle p-Elemente | Ext.query('div[id=aussen] p') | » anzeigen |
| 2.) alle inneren p-Elemente | Ext.query('div[id=innen] p') | » anzeigen |
| 3.) das zweite innere p-Element | Ext.query('div[id=innen] p:nth-child(2)') | » anzeigen |
| 4.) die ungeraden Kind-Elemente vom Typ p des div-Elementes "aussen" (inklusiv) | Ext.query('div[id=aussen] p:nth-child(odd)') | » anzeigen |
| 5.) das letzte innere p-Element | Ext.query('div[id=innen] p:last-child') | » anzeigen |
| 6.) alle p-Elemente mit dem Style "underline" | Ext.query('div[id=aussen] p{text-decoration=underline}') | » anzeigen |
| 7.) alle p-Elemente deren id auf "ab" endet | Ext.query('div[id=aussen] p[id$=ab]') | » anzeigen |
| 8.) alle p-Elemente deren id "ab" beinhaltet | Ext.query('div[id=aussen] p[id*=ab]') | » anzeigen |
Die sogenannten Pseudo-Selektoren (nth-child(n), odd, even, first, last usw.) sind 1-basiert, d. h. deren Zählung beginnt nicht bei 0 sondern bei 1. Während die Zählung der Kind-Elemente unabhängig vom Element-Typ passiert, werden jedoch nur die p-Elemente selektiert. Das Beispiel Nr. 4 kann daher verwirrend sein. Es werden Absatz 1, Absatz 4, Absatz 6 und Absatz 2 hervorgehoben.
Die Kind-Elemente von "aussen" sind
1) <p>Absatz 1 ...
2) <div id='innen' ...
3) <p>Absatz 2 ...
4) <p>Absatz 3 ...
Die p-Elemente im div-Element "innen" bilden eine andere Gruppe, deren Zählung ebenfalls beim übergeordneten div-Element beginnt.
Die Kind-Elemente von "innen" sind
1) <p>Absatz 4 ...
2) <p>Absatz 5 ...
3) <p>Absatz 6 ...
Es ist bei der Selektion der p-Elemente jedoch möglich in einer Gruppe zu bleiben. Dafür sorgt das > in der Selektion. Ich benenne diesen Fall mit "exklusiv" während die Selektion ohne das > mit "inklusiv" bezeichnet wird.
| 1.) die ungeraden Kind-Elemente vom Typ p des div-Elementes "aussen" (inklusiv) | Ext.query('div[id=aussen] p:nth-child(odd)') | » anzeigen |
| 2.) die ungeraden Kind-Elemente vom Typ p des div-Elementes "aussen" (exklusiv) | Ext.query('div[id=aussen] > p:nth-child(odd)') | » anzeigen |
Wichtig: die nachfolgenden Beispiele sind immer im Kontext der Selektion von p-Elementen innerhalb von "aussen" zu verstehen (wie oben gezeigt)
Eine weitere Notation der Pseudo-Selektoren ist :nth-child(an+b).
Das n kann man sich als eine bei 0 startende Zählvariable vorstellen. Setzt man nun a = 2 und b = 1 entsteht dabei folgender Ausdruck :nth-child(2n+1). Selektiert wird also
2 * 0 + 1 = 1 -> Absatz 1
2 * 1 + 1 = 3 -> Absatz 3
Die beiden Ausdrücke:
Ext.query('div[id=aussen] p:nth-child(odd)')
Ext.query('div[id=aussen] p:nth-child(2n+1)')
sind somit gleichwertig und selektieren die ungeraden Elemente innerhalb einer Gruppe.
Setzt man a = 0 und b = 3, dann entsteht :nth-child(0n+3), was natürlich gleichbedeutend mit :nth-child(3) ist und nur das dritte Element der Gruppe selektiert.
n kann auch negative Werte annehmen. Dies sieht zunächst ungewöhnlich aus, jedoch erlaubt dies die folgende Selektion:
:nth-child(-n+2) (a = 1)
Gruppe 1:
-0 + 2 = 2 -> kein Treffer, da div-Element
-1 + 2 = 1 -> Absatz 1
Gruppe 2:
-0 + 2 = 2 -> Absatz 4
-1 + 2 = 1 -> Absatz 5
Selektiert werden also die ersten zwei passenden Elemente der jeweiligen Gruppe.
