Pseudoklasa :not()

piątek, 12 marzec 2010 00:25 Administrator
Drukuj

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