Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :last-child

Email Drukuj PDF

Kolejną strukturalną pseudoklasą jest :last-child, za pomocą której możemy odnieść się z formatowaniem do elementu, który jest ostatnim dzieckiem swojego rodzica. Przykładowy arkusz stylów wykorzystujący pseudoklasę :last-child może mieć postać:

LI:last-child

{

color:red;

font-style:italic;

font-weight:bolder;

}

Przykładowy arkusz stylów podda formatowaniu ostatnią pozycję listy. Przykład działania widoczny jest poniżej. Użytkownicy przeglądarki Internet Explorer efekt działania prezentowanej pseudoklasy zobaczą na rysunku 15.5, ponieważ ta przeglądarka nie obsługuje tego elementu.

<<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:last-child

{

color:red;

font-style:italic;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

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

Osoby, które dokładnie analizowały niniejszy kurs, z pewnością zauważyły już, że omawiany w tej chwili element jest odpowiednikiem pseudoklasy :nth-last-child(1).

Rysunek 15.5. Przykład działania pseudoklasy :last-child

 

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