Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoklasa :nth-child()

Email Drukuj PDF

Pseudoklasa :nth-child() jest kolejnym elementem należącym do grupy pseudoklas strukturalnych, za pomocą których możemy odwołać się do struktury dokumentu XHTML/HTML będącej poza zasięgiem klasycznych selektorów.

Za pomocą pseudoklasy :nth-child() możemy odwołać się do elementu, który ma przed sobą określoną w nawiasie liczbę rodzeństwa w strukturze dokumentu. Wartość umieszczona w nawiasie może być numerem, słowem kluczowym lub formułą.

Listing widoczny poniżej posłuży mi jako punkt wyjścia do prezentacji możliwości pseudoklasy :nth-child() i sposobów jej wykorzystania.

<div class="przyklad">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

</div>

Przykład widoczny poniżej wykorzystuje pseudoklasę :nth-child() z numerem określającym formatowany element. Kolor czerwony zostanie przypisany trzeciemu akapitowi dostępnemu w przykładowym listingu. Zwróć uwagę na to, że w naszym przykładzie akapity są potomkami elementu <DIV>.

p:nth-child(3)

{

color:red;

}

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

p:nth-child(3)

{

color:red;

}

}

</style>

</head>

<body>

<div class="przyklad">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula.</p>

</div>

</body>

</html>

<</przykład>>

Jeżeli zajdzie taka potrzeba, to pseudoklasa :nth-child() może zostać wykorzystana wraz z jednym ze słów kluczowych do niej przypisanych. Według projektu trzeciej specyfikacji CSS do dyspozycji mamy dwa słowa kluczowe:

  • odd — odnosi się do nieparzystych elementów (pierwszego, trzeciego, piątego etc.);

  • even — odnosi się do parzystych elementów (drugiego, czwartego, szóstego etc.).

Poniżej przykład wykorzystania pseudoklasy nth-child() do formatowania dwóch rodzajów list. Dodatkowo przykład łączy w sobie omawianą pseudoklasę oraz selektor potomka.

UL LI:nth-child(even)

{

color:red;

font-style:italic;

}

OL LI:nth-child(odd)

{

color:green;

font-weight:bolder;

}

Efekt działania przykładowego arkusza widać poniżej.

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

UL LI:nth-child(even)

{

color:red;

font-style:italic;

}

OL LI:nth-child(odd)

{

color:green;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Przykład :nth-child(even)</h1>

<ul>

  <li>Pierwsza pozycja listy</li>

  <li>Druga pozycja listy</li>

  <li>Trzecia pozycja listy</li>

  <li>Czwarta pozycja listy</li>

  <li>Piąta pozycja listy</li>

  <li>Szósta pozycja listy</li>

</ul>

 

<h1>Przykład :nth-child(odd)</h1>

<ol>

  <li>Pierwsza pozycja listy</li>

  <li>Druga pozycja listy</li>

  <li>Trzecia pozycja listy</li>

  <li>Czwarta pozycja listy</li>

  <li>Piąta pozycja listy</li>

  <li>Szósta pozycja listy</li>

</ol>

</div>

</body>

</html>

<</przykład>>

Jeżeli zajdzie potrzeba bardziej skomplikowanego formatowania elementów za pomocą pseudoklasy :nth-child(), to wtedy należy sięgnąć po możliwość wpisania formuły pomiędzy nawias. Formuła ma postać aN+B, gdzie aN to wartość skoku, a B to punkt, od którego zaczyna działać formuła. Nie da się ukryć, że niniejszy opis jest dość skomplikowany, ale po zapoznaniu się z następnym przykładem wszystko powinno stać się jasne.

Na początek kawałek kodu XHTML/HTML, na którym będziemy pracować w dalszej części.

<ol>

  <li>Pierwsza pozycja listy</li>

  <li>Druga pozycja listy</li>

  <li>Trzecia pozycja listy</li>

  <li>Czwarta pozycja listy</li>

  <li>Piąta pozycja listy</li>

  <li>Szósta pozycja listy</li>

  <li>Siódma pozycja listy</li>

  <li>Ósma pozycja listy</li>

  <li>Dziewiąta pozycja listy</li>

  <li>Dziesiąta pozycja listy</li>

</ol>

Za pomocą pseudoklasy :nth-child() chcemy wymusić formatowanie co drugiego wiersza listy, ale formatowanie ma zacząć działać od piątego wiersza naszej listy. Odpowiedni przykład arkusza stylów znajduje się poniżej.

LI:nth-child(2n+5)

{

color:red;

font-style:italic;

font-weight:bolder;

}

Formuła, która spełni nasze założenia, ma postać 2n+5. Natomiast efekt działania widać poniżej.

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

LI:nth-child(2n+5)

{

color:red;

font-style:italic;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Przykład :nth-child(formuła)</h1>

<ol>

  <li>Pierwsza pozycja listy</li>

  <li>Druga pozycja listy</li>

  <li>Trzecia pozycja listy</li>

  <li>Czwarta pozycja listy</li>

  <li>Piąta pozycja listy</li>

  <li>Szósta pozycja listy</li>

<li>Siódma pozycja listy</li>

<li>Ósma pozycja listy</li>

<li>Dziewiąta pozycja listy</li>

<li>Dziesiąta pozycja listy</li>

</ol>

</div>

</body>

</html>

<</przykład>>

Pseudoklasa :nth-child() nie działa w przeglądarce Internet Explorer. Dlatego na rysunku 15.3 zamieściłem wynik działania ostatniego z przykładów.

Rysunek 15.3. Przykład działania pseudoklasy :nth-child(2n+5)

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15577115