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 |
