Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :nth-of-type()

Email Drukuj PDF

Pseudoklasa :nth-of-type() 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-of-type() możemy odwołać się do ściśle określonego 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łą. Innymi słowy, :nth-of-type() działa podobnie jak pseudoklasa :nth-child(), ale odnosi się wyłącznie do elementów określonego typu, np. akapitów.

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

<div class="przyklad">

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

</div>

Przykład widoczny poniżej wykorzystuje pseudoklasę :nth-of-type() 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-of-type(3)

{

color:red;

}

Jeżeli zajdzie taka potrzeba, to pseudoklasa :nth-of-type() 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.).

P:nth-of-type(odd)

{

color:red;

}

Gdy potrzebujemy bardziej skomplikowanego formatowania elementów za pomocą pseudoklasy :nth-of-type(), to wtedy należy sięgnąć po możliwość wpisania formuły pomiędzy nawiasy. Formuła ma postać aN+B, gdzie aN to wartość skoku, a B to punkt, od którego zaczyna działać formuła. Zasada działania jest dokładnie taka sama, jak w przypadku pseudoklasy :nth-child(), o której pisałem nieco wcześniej.

P:nth-of-type(2n+3)

{

color:red;

}

Poniżej zamieszczam przykład działania omawianej pseudoklasy w odniesieniu do prostego dokumentu, którego listing zamieściłem na początku niniejszego podrozdziału. Formatowaniu poddane zostały nieparzyste nagłówki oraz parzyste akapity. Odpowiedni fragment arkusza stylów ma postać:

P:nth-of-type(even)

{

color:red;

font-style:italic;

font-weight:bolder;

}

H1:nth-of-type(odd)

{

color:green;

}     

Natomiast efekt działania jest widoczny poniżej. Jak łatwo można się domyślić, użytkownicy przeglądarki Internet Explorer nie zobaczą efektu działania prezentowanej pseudoklasy.

<<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-of-type(even)

{

color:red;

font-style:italic;

font-weight:bolder;

}

H1:nth-of-type(odd)

{

color:green;

}     

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

<h1>Lorem ipsum dolor sit amet</h1>

<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.</p>

</div>

</body>

</html>

<</przykład>>

Rysunek 15.4. Przykład działania pseudoklasy :nth-of-type()

 

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 : 15211457