Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :last-of-type

Email Drukuj PDF

Pseudoklasa :last-of-type to następny selektor strukturalny, za pomocą którego możemy przypisać formatowanie do ostatniego ściśle określonego elementu mającego wspólnego rodzica. Mówiąc prościej, korzystając z prezentowanej pseudoklasy, możemy na przykład poddać formatowaniu ostatnią pozycję listy.

LI:last-of-type

{

color:red;

font-style:italic;

font-weight:bolder;

}

Powyższy arkusz stylów odnosi się do prostej listy, której kod ma następującą postać:

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

Przykład działania widoczny jest poniżej. Użytkownicy przeglądarki Internet Explorer efekt działania prezentowanej pseudoklasy zobaczą na rysunku 15.7, 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-of-type

{

color:red;

font-style:italic;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Przykład :last-childof-type</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-of-type(1).

Rysunek 15.7. Przykład działania pseudoklasy :last-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 : 15752076