Pseudoklasa :not() w nawiasie zawiera argument, który jest selektorem prostym, np. może to być p. Następnie wymusza formatowanie tych elementów, które nie są argumentem zapisanym w nawiasie. Aby łatwiej było zrozumieć sens działania niniejszego elementu, przyjrzyjmy się prostemu listingowi kodu XHTML/HTML.
<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>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
<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>
Następnie, korzystając z selektora uniwersalnego (symbol gwiazdki), ustawmy dowolny kolor zgodnie z poniższym wzorem.
*
{
color:green;
}
Kolejnym krokiem będzie przypisanie innego kolor dla wszystkich elementów, które nie są akapitami. Do tego celu wykorzystamy pseudoklasę :not() zgodnie z poniższym wzorem. Ważne jest to, aby w nawiasie obok nazwy pseudoklasy podać selektor, który ma mieć inne formatowanie niż reszta dokumentu.
:not(p)
{
color:red;
}
Efekt działania przykładu zaprezentowanego w niniejszym podrozdziale znajduje się poniżej. Niestety użytkownicy przeglądarki Internet Explorer muszą zadowolić się rysunkiem 15.11, ponieważ pseudoklasa :not() nie jest obsługiwana przez tę przeglądarkę.
<<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">
*
{
color:green;
}
:not(p)
{
color:red;
}
}
</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>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
<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.11. Przykład działania pseudoklasy :not() |
