Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - selektory pseudoklas

CSS3 - pseudoklasa :nth-child

Email Drukuj PDF

Tematy: :first-of-type | :last-of-type | :only-of-type | :only-child | :nth-child | :nth-last-child | :nth-of-type | :nth-last-of-type | :last-child | :root | :empty | :target | :enabled | :disabled | :checked | :not

Pseudoklasa :nth-child wyróżnia elementy według podanego schematu, uwzględniając w kolejności dzieci dowolnego typu.

Przykładowo, kod o postaci:

li:nth-child(odd) {color:green; font-style:italic; font-weight:bold;}

wyróżni pozycje listy, ale uwzględniając także w kolejności inne dzieci, jak akapity. W poniższym przykładzie wyróżnienie dotyczy nieparzystych elementów, ale, jak widać, zaznaczone są trzecia i czwarta pozycja wykazu, gdyż pomiędzy nimi jest też zakres z kodem SPAN. Krótko mówiąc, selektor wyróżnia co drugi dowolny element będący dzieckiem danego rodzica.

Wartościami mogą być liczby, even (parzyste), odd (nieparzyste) oraz formuły, np. 2n+1 (n=0,1,...).

Lista nth-child(odd)

  1. Pierwsza pozycja listy
  2. Druga pozycja listy
  3. Trzecia pozycja listy
  4. zakres objęty kodem SPAN
  5. Czwarta pozycja listy
  6. Piąta pozycja listy
  7. Szósta pozycja listy
  8. Siódma pozycja listy
  9. Ósma pozycja listy

Lista nth-child(4)

  1. Pierwsza pozycja listy
  2. Druga pozycja listy
  3. Trzecia pozycja listy
  4. Czwarta pozycja listy
  5. Piąta pozycja listy
  6. Szósta pozycja listy
  7. Siódma pozycja listy
  8. Ósma pozycja listy

Lista nth-child(3n-1)

  1. Pierwsza pozycja listy
  2. Druga pozycja listy
  3. Trzecia pozycja listy
  4. Czwarta pozycja listy
  5. Piąta pozycja listy
  6. Szósta pozycja listy
  7. Siódma pozycja listy
  8. Ósma pozycja listy

Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V