Kurs języka HTML i CSS

Poradnik webmastera

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

Selektor ogólnego rodzeństwa

Email Drukuj PDF

Zanim opiszę działanie selektora prostego, proponuję przyjrzeć się prostemu fragmentowi kodu XHTML/HTML, który pozwoli nam lepiej zrozumieć przeznaczenie omawianego elementu.

<div class="przyklad">

<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.</p>

 

<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.</p>

 

<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.</p>

</div>

Zwróć uwagę na to, że znaczniki <H1> oraz <P> są dziećmi znacznika <DIV>. Poza tym zawsze znacznik <H1> poprzedza znacznik <P>.

Selektor ogólnego rodzeństwa składa się z dwóch prostych selektorów rozdzielonych znakiem ~ (tyldy). Poniżej znajduje się prosty przykład selektora ogólnego rodzeństwa odnoszący się do naszego przykładowego listingu.

H1 ~ P

{

color:red;

font-weight:bolder;

}

Selektor ogólnego rodzeństwa pasuje do tych elementów selektora drugiego (w naszym przypadku jest to P), które są poprzedzone elementami pierwszego selektora (w naszym przypadku jest to H1). Oba elementy muszą mieć wspólnego rodzica (w naszym przypadku jest to DIV) i dodatkowo drugi element nie musi być bezpośrednio poprzedzony pierwszym elementem.

Przykładowy arkusz stylów oraz fragment kodu XHTML/HTML wymusi formatowanie wszystkich akapitów za pomocą koloru czerwonego i pogrubionej czcionki.

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

H1 ~ P

{

color:red;

font-weight:bolder;

}

}

</style>

</head>

<body>

<div class="przyklad">

<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.</p>

<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.</p>

<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.</p>

</div>

</body>

</html>

<</przykład>>

Selektor ogólnego rodzeństwa nie działa w przeglądarce Internet Explorer.

 

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