Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :only-of-type

Email Drukuj PDF

Pseudoklasa :only-of-type działa podobnie jak opisana nieco wcześniej :only-child, z tą różnicą, że dotyczy tylko tych elementów, które są jedynymi dziećmi danego typu swojego rodzica.

Aby lepiej zrozumieć sens działania prezentowanej pseudoklasy, przyjrzyj się najpierw poniższemu listingowi kodu XHTML/HTML.

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

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

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

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

Zwróć uwagę na to, że listing składa się z dwóch bloków zamkniętych pomiędzy znacznikami <DIV></DIV>. Pierwszy blok posiada czterech potomków — jeden nagłówek stopnia pierwszego oraz trzy akapity. Natomiast drugi blok ma dwóch potomków — jeden nagłówek stopnia pierwszego i jeden akapit.

Dzięki pseudoklasie :only-of-type możemy poddać formatowaniu albo nagłówek stopnia pierwszego w obu blokach, albo akapity w drugim bloku. Zarówno nagłówek stopnia pierwszego (w obu blokach), jak i akapit w drugim bloku to jedyne dzieci danego typu swojego rodzica. Odpowiedni styl formatujący akapit tekstu może mieć postać:

P:only-of-type

{

color:red;

font-style:italic;

font-weight:bolder;

}

Przykład działania widoczny poniżej zobaczą użytkownicy nowych wersji przeglądarek Safari, Opera, Chrome oraz Mozilla Firefox. Natomiast posiadacze przeglądarki Internet Explorer zmuszeni są zadowolić się rysunkiem 15.9.

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

P:only-of-type

{

color:red;

font-style:italic;

font-weight:bolder;

}

}

</style>

</head>

<body>

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

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

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

<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.1. Przykład działania pseudoklasy :only-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 : 15226301