2010-04-20 12:55:38

Jak wykorzystać selektory cz. 2

W poprzednim artykule przedstawiłem selektor uniwersalny, selektor typu, selektory potomka, dziecka i braci. W tym artykule będę kontynuował opis używania kolejnych selektorów.

Definicję styli będziemy nadal umieszczać w pliku „style.css”. Kod strony „index.html” zmienił się w niewielkim stopniu i powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong class="wielkie">Etiam ullamcorper. <a id="pierwszy" href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span class="wielkie">non felis. <a rel="nofollow" href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#" rel="follow">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p class="wielkie">Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Często bywa tek, że część właściwości ma być identyczna dla różnych elementów strony. Np. i akapity i elementy div mają mieć identyczne obramowanie, a kolor tła dla każdego z tych elementów ma być inny. Do ustalenia obramowania użyjemy selektora grupowania – selektory poszczególnych elementów umieszczamy oddzielone przecinkiem jeden za drugim przed definicją stylu. Pozostałe właściwości określimy w zwykłych selektorach typów.

div, p {border: 2px solid #ff0000;}
div {background-color: #ff9966;}
p {background-color: #99ff66;}

Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Grupować można selektory wszystkich rodzajów. Następny rodzaj selektora to selektor atrybutu. Oto jego przykład:

a[rel] {color: #66ff66;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) posiadające atrybut „rel” bez względu na jego wartość. Jeżeli chcemy wyróżnić elementy o określonej wartości atrybutu, użyjemy selektora atrybutu o określonej wartości

a[rel="nofollow"] {color: #cc33ff;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko ten odnośnik, którego atrybut „rel” miał wartość „nofollow”.

Selektor klasy pozwala na wybranie wszystkich elementów określonej klasy, albo tylko elementów określonego typu tej klasy. Selektor klasy jest zapisywany z kropką przed nazwą klasy, może być dodany do innego selektora (bez spacji przed kropką), ogranicza wówczas zakres tego selektora do elementów tej klasy:

.wielkie {font-size: large;}
span.wielkie {font-weight: bold;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Wszystkie elementy klasy „wielkie” zostały powiększone. Dodatkowo, dzięki drugiej definicji stylu, zawartość elementu „span” została też pogrubiona. Pogrubienie elementu „strong” wynika z samej jego definicji i jest realizowane przez przeglądarkę, a nie style.

Selektor identyfikatora

#pierwszy {border: 4px double #ff0000;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Element o identyfikatorze „pierwszy” został otoczony podwójną ramką. Na jednej stronie wczytanej do przeglądarki może znajdować się tylko jeden element o określonym identyfikatorze.

Ciąg dalszy może pojawić się szybciej, jeżeli poniżej pojawi się kilka komentarzy od was.

Tagi:

Dodaj odpowiedź