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-of-type

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-of-type pozwala wyróżniać n-ty element danego typu.

Kod o postaci:

li:nth-of-type(2) {color:chocolate; font-weight:bold;}

spowoduje wyświetlenie drugiego elementu danego typu z użyciem zdefiniowanego formatowania.

  1. Pierwszy punkt.
  2. Drugi punkt.
  3. Trzeci punkt.
  4. Czwarty punkt
  5. Piąty punkt

Jeśli zamiast liczby w nawiasie użyjemy wartości odd, np.

li:nth-of-type(odd) {color:green;}

oznaczone zostaną elementy nieparzyste.

  1. Pierwszy punkt.
  2. Drugi punkt.
  3. Trzeci punkt.
  4. Czwarty punkt
  5. Piąty punkt

Jeśli zamiast liczby w nawiasie użyjemy wartości even, np.

li:nth-of-type(even) {color:red;}

oznaczone zostaną elementy parzyste.

  1. Pierwszy punkt.
  2. Drugi punkt.
  3. Trzeci punkt.
  4. Czwarty punkt
  5. Piąty punkt

Możemy także użyć formuły, np: (3n-1)

li:nth-of-type(3n-1) {color:violet; font-weight:bold;}
  1. Pierwszy punkt.
  2. Drugi punkt.
  3. Trzeci punkt.
  4. Czwarty punkt
  5. Piąty punkt
  6. Szósty punkt
  7. Siódmy punkt
  8. Ósmy punkt

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