child

Als child bezeichnet man in HTML alle Elemente, die von einem umschließdenden Element umgeben sind. Tatsächlich sind auch Elemente im body childs des bodys, denn der body umschließt die Elemente. Die umschließenden Elemente werden parent bezeichnet. Um childs einzugrenzen, kann man als Selektoren die parents mit angeben.
Die Ansprache von childs ist nur via interner und externer CSS möglich, da es sich hierbei um Pseudoklassen handelt.

---

first-child

p:first-child = Wählt das 1. p (aber auch nachfolgend die jeweils Ersten), der sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder ul
Jedoch muss bei first-child das korrekt angesprochene Element auch zwingend das 1. child im parent sein. Sollte also das 1. p angesprochen werden, jedoch vor dem p noch ein h1 sein (<div><h1><p>) wird dieses p als 2. Element nicht mehr angesprochen!).

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

---

---

last-child

p:last-child = Wählt das letzt p (aber auch nachfolgend die jeweils Letzen), der sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder ul
Jedoch muss bei last-child das korrekt angesprochene Element auch zwingend das letzte child im parent sein. Sollte also das letzte p angesprochen werden, jedoch nach dem p noch ein h1 sein (<div><p><h1>) wird dieses p als vorletztes Element nicht mehr angesprochen!).

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

---

---

only-child

p:only-child = Wählt nur das p-Element aus, das ganz allein als child vorkommt, ohne andere childs (aber auch nachfolgend alleinigen), und sich in einem umschließenden Element befindet
Das umschließende Element kann auch angegeben werden zur Eingrenzung. i.d.R. div oder ul
Jedoch muss bei only-child das korrekt angesprochene Element auch zwingend das einzige child im parent sein. Sollten also vor oder nach dem p-Element noch andere Elemente dabei sein wird dieses p-Element nicht mehr angesprochen!.

---

nth-child

div:nth-child(1) > wählt das 1. div-Element eines parents.
div:nth-child(2) > wählt das 2. div-Element eines parents.
div:nth-child(even) > wählt alle geraden div-Elemente eines parents. (vgl.: div:nth-child(2n))
div:nth-child(odd) > wählt alle ungeraden div-Elemente eines parents. (vgl.: div:nth-child(2n+1))

In diesem Beispiel wurde das 1. & 2. Element angesprochen, sowie alle geraden und ungeraden Elemente.




Meine Tabelle 1
(Tabelle ohne Rahmen und ohne Abstrand zwischen den Zeilen und Spalten mit: border-collapse: collapse;)

Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du

Meine Tabelle 2

Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du
Hallo	Du

Mein Tagebuch

---

Anderes automatisches Muster

nth-child(an+b)
Für a und b können Werte eingegeben werden, n beginnt bei 0 und wird dann automatisch hochgerechnet.

Rechenbeispiele und Erklärung:
nth-child(3n+4): 3*0+4 = 4. Element | 3*1+4 = 7. Element | 3*2+4 = 10. Element | 3*3+4 = 13. Element (a gibt den Abstand der folgenden Elemente an, b gibt das Startelement an)

nth-child(2n+8): 2*0+8 = 8. Element (b) | 2*1+8 = 10. Element (a+b) | 2*2+8 = 12. Element (a+a+b) | 2*3+8 = 14. Element (a+a+a+b)

---

Mit nth-child(1) oder first-child das 1. Element ansprechen

Wenn wir immer das 1. Element ansprechen wollen, auch wenn sich dieses unterscheidet, gibt es unterschiedliche Möglichkeiten.

- Wir haben nur 3 unterschiedliche Elemente, die an 1. Stelle kommen, dann können wir diese folgendermaßen ansprechen:
div p:first-child, div h1:first-child, div h3:first-child {


- Wir haben zu viele unterschiedliche Elemente, die an 1. Stelle kommen, dann können wir diese folgendermaßen ansprechen:
div *:first-child { oder div :first-child {