Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :nth-last-child()

Email Drukuj PDF

Pseudoklasa :nth-last-child() działa podobnie jak opisana powyżej pseudoklasa :nth-child(), z tą różnicą, że liczenie 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.

LI:nth-last-child(2n+5)

{

color:red;

font-style:italic;

font-weight:bolder;

}

Poniżej zamieszczam przykład działania pseudoklasy :nth-last-child() w odniesieniu do tego samego elementu, który widać na rysunku 15.3. Jak łatwo się domyślić, tym razem formatowanie zacznie się od piątej pozycji, licząc od tyłu (czyli będzie to szósty wiersz listy), i dotyczyć będzie co drugiego wiersza.

<<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-last-child(2n+5)

{

color:red;

font-style:italic;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Przykład :nth-last-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>>

Podobnie jak to było w przypadku pseudoklasy :nth-child(), również :nth-last-child() 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 : 15464195