Pseudoklasa :only-child pozwala poddać formatowaniu tylko te elementy, które są pierwszym i jedynym dzieckiem swojego rodzica. Przykładowy arkusz korzystający z prezentowanej pseudoklasy może mieć postać:
LI:only-child
{
color:red;
font-style:italic;
font-weight:bolder;
}
Przykładowy arkusz odnosi się do prostej listy. Aby lepiej poznać specyfikę działania pseudoklasy :only-child, warto stworzyć dwie listy — pierwszą mającą więcej niż jedną pozycję oraz drugą tylko z jednym elementem.
<h1>Przykład :only-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>
<h1>Przykład :only-child</h1>
<ol>
<li>Pierwsza pozycja listy</li>
</ol>
Zgodnie z przeznaczeniem pseudoklasa :only-child obejmie swoim działaniem wyłącznie drugą listę, ponieważ tylko ona posiada jedną pozycję — jedno dziecko rodzica, którym w tym przypadku jest <UL>. Niestety użytkownicy Internet Explorera efekt działania poniższego przykładu zobaczą jedynie na rysunku 15.8, ponieważ przeglądarka ta nie obsługuje pseudoklasy :only-child.
<<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:only-child
{
color:red;
font-style:italic;
font-weight:bolder;
}
}
</style>
</head>
<body>
<div class="przyklad">
<h1>Przykład :only-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>
<h1>Przykład :only-child</h1>
<ol>
<li>Pierwsza pozycja listy</li>
</ol>
</div>
</body>
</html>
<</przykład>>
|
|
Rysunek 15.8. Przykład działania pseudoklasy :only-child |
