Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :nth-last-of-type()

Email Drukuj PDF

Pseudoklasa :nth-last-of-type() działa podobnie jak opisana powyżej pseudoklasa :nth-of-type(), z tą różnicą, że liczenie ściśle określonych elementów odbywa się od końca, a nie od początku, jak to miało miejsce poprzednio. Oczywiście również tutaj pomiędzy nawiasami możemy stosować numery, słowa kluczowe lub formuły.

H1:nth-last-child(odd)

{

color:red;

font-style:italic;

font-weight:bolder;

}

Poniżej zamieszczam przykład działania pseudoklasy :nth-last-of-type() w odniesieniu do tego samego elementu, który widać na rysunku 15.4. Jak łatwo się domyślić, tym razem formatowanie zacznie się od końca.

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

{

color:red;

font-style:italic;

font-weight:bolder;

}

H1:nth-last-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>>

Podobnie jak pseudoklasa :nth-of-type (), również :nth-last-of-type () nie działa w przeglądarce Internet Explorer.

 

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