Kurs języka HTML i CSS

Poradnik webmastera

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

Pseudoklasa :not()

Email Drukuj PDF

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

 

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