Pierwsze dziecko :first-child

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

Dowolny rodzic:

dziecko:first-child { cecha: wartość }

Określony rodzic:

rodzic > dziecko:first-child { cecha: wartość }

Rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica.

Przykład :first-child

Po wpisaniu w arkuszu stylów:

b:first-child { color: red }

a w dowolnym miejscu strony:

<p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być czerwone)</b> oraz <b>drugie pogrubienie (nie powinno być czerwone)</b>.</p>

na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego:

To jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (powinno być czerwone) oraz drugie pogrubienie (nie powinno być czerwone).

Zwróć uwagę, że zwykły tekst znajdujący się na początku rodzica, przed pierwszym dzieckiem, nie ma wpływu na działanie tego selektora. Dzieje się tak dlatego, gdyż tzw. anonimowy tekst nie jest częścią drzewa dokumentu.

Dla reguły w arkuszu stylów:

p > b:first-child { color: red }

odpowiednie atrybuty otrzyma pogrubienie (znacznik b), będący pierwszym dzieckiem elementu p. Jeśli będzie się on zawierał w innym znaczniku, jego wygląd nie zostanie zmieniony:

To jest akapit, a to pogrubienie, czyli pierwsze dziecko (powinno być czerwone), wewnątrz tego akapitu.

To jest akapit, a to pochylenie, czyli pierwsze dziecko (nie powinno być czerwone, ponieważ nie jest pogrubieniem), wewnątrz tego akapitu. Tutaj z kolei jest pogrubienie (nie powinno być czerwone), ale drugie nie pierwsze dziecko.

To jest akapit, a to pochylenie i pogrubienie (nie powinno być czerwone), wewnątrz pochylenia.

Inny przykład:

p:first-child b { color: red }

Odpowiednie cechy otrzyma znacznik b, będący potomkiem elementu p, który z kolei jest czyimś pierwszym dzieckiem (nie ma znaczenia czyim), np.:

<div>
	<p>To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest <i>pochylenie, wewnątrz którego znajduje się <b>pogrubienie (powinno być czerwone)</b></i>.</p>
</div>

To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest pochylenie, wewnątrz którego znajduje się pogrubienie (powinno być czerwone).