Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :empty

Email Drukuj PDF

Ostatnią strukturalną pseudoklasą jest :empty, która odpowiada za formatowanie tych elementów, które nie posiadają swoich dzieci i nie zawierają innych elementów. Dlatego z trzech poniższych przykładów tylko pierwszy element możemy uznać za pusty.

<div></div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div><img src=”obrazek.jpg” /></div>

Odpowiedni arkusz wykorzystujący omawianą pseudoklasę może mieć następującą postać:

DIV:empty

{

width:80%;

height:200px;

background-color:silver;

margin:auto;

}

Natomiast kod XHTML/HTML, do którego możemy podłączyć nasz przykładowy arkusz, wygląda następująco:

<div>

<div></div>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>

</div>

Ciekawostką jest to, że formatowaniu poddany zostanie wyłącznie wyróżniony w listingu blok <DIV></DIV>, ponieważ tylko on nie posiada dzieci. Efekt działania powyższego przykładu będzie widoczny jedynie w nowych wersjach przeglądarek Chrome, Safari, Opera oraz Mozilla Firefox. Użytkownicy Internet Explorera muszą zadowolić się rysunkiem 15.10.

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

DIV:empty

{

width:80%;

height:200px;

background-color:silver;

margin:auto;

}

}

</style>

</head>

<body>

<div>

<div></div>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci.</p>

</div>

</body>

</html>

<</przykład>>

Rysunek 15.10. Przykład działania pseudoklasy :empty

 

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