Pseudoklasa :last-child

czwartek, 11 marzec 2010 20:43 Administrator
Drukuj

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