Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :only-child

Email Drukuj PDF

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

 

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