Pseudoklasa :first-of-type to kolejny selektor strukturalny, za pomocą którego możemy przypisać formatowanie do pierwszego ś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 pierwszą pozycję listy.
LI:first-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.6, 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:first-of-type
{
color:red;
font-style:italic;
font-weight:bolder;
}
}
</style>
</head>
<body>
<div class="przyklad">
<h1>Przykład :first-of-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-of-type(1).
|
|
Rysunek 15.6. Przykład działania pseudoklasy :first-of-type |
