Selektory

Pojęcie selektora, o którym kilka razy już wspominałem, jest jednym z najważniejszych elementów składowych CSS. To właśnie dzięki selektorowi możemy przypisać konkretny styl dla wybranego elementu. Selektory wykorzystywane podczas tworzenia własnych arkuszy stylów mogą przybierać różne formy. Specyfikacja przewiduje wykorzystanie następujących ich rodzajów:

■    selektory proste,
■    selektory uniwersalne,
■    selektory potomka,
■    selektory dziecka,
■    selektory rodzeństwa.

Selektory proste
Konstrukcja stylu wykorzystującego selektor prosty nie należy do zbyt skomplikowanych i wygląda tak, jak na poniższym przykładzie.

p
{
color:red; font-size:14pt;
}

Jak widzisz, selektorem jest znacznik języka XHTML/HTML przypisany do elementu, który chcesz w danym momencie formatować. Styl zdefiniowany dla przykładowego selektora p będzie odnosił się wyłącznie do akapitów zamkniętych w znacznik <p></p> i nie będzie wpływał na pozostałe elementy strony WWW.

Selektory uniwersalne

Styl zaprezentowany poniżej jest przykładem selektora prostego i odnosi się tylko do elementów zamkniętych pomiędzy znacznikami <p></p>.

p
{
color:red; font-size:14pt;
}

W związku z tym wszystkie inne elementy, np. nagłówki czy tabele, nadal będą formatowane w sposób domyślny. Oczywiście sytuacja taka jest zupełnie poprawna i dzięki temu praca z CSS jest bardzo prosta i przyjemna. Jeden wpis i mamy załatwione wszystkie akapity — to jest to!

Zdarza się jednak, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał on na cały dokument. Bardzo dobrym przykładem takiej sytuacji może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl może przyjąć następującą postać:

*
{
background-color:white;
}

Warto zwrócić uwagę na to, że selektorem jest gwiazdka. Symbol ten jest spotykany przy listowaniu zawartości folderów czy też zakładaniu filtrów.

dir *.txt
copy *.* c:\temp

W każdym przykładzie gwiazdka zastępowała jakieś elementy, np. w pierwszym polecenie di r wyświetla wszystkie pliki z rozszerzeniem txt, natomiast w drugim następuje kopiowanie wszystkich plików z bieżącej lokalizacji do katalogu temp na dysku C:\.

Również kaskadowe arkusze stylów mają podobne podejście do roli gwiazdki, dzięki czemu istnieje możliwość zdefiniowania uniwersalnych stylów. Innymi słowy, użycie gwiazdki zwalnia od wpisywania nazw poszczególnych selektorów.

Przyjrzyjmy się pierwszej sytuacji, w której zależało mi na tym, aby ustawić kolor czerwony dla wszystkich akapitów, nagłówków stopnia pierwszego i list na przykładowej stronie.

p
{
color:red;
}
ul
{
color:red;
}
h1
{
color:red;
}

Definiowanie w ten sposób właściwości wszystkich elementów mija się z celem, ponieważ jest bardzo pracochłonne. Na szczęście używając selektora uniwersalnego, operację tę można znacznie uprościć, a cały arkusz skrócić do jednego wpisu. Przykład widoczny poniżej pozwala na uzyskanie identycznego efektu końcowego jak we wcześniejszym listingu.

*
{
color:red;
}

Innym selektorem uniwersalnym jest body.

body
{
color:red;
}

Uniwersalność body wynika z jego roli w hierarchii dokumentu. Dokładnie chodzi tu o funkcję dziedziczenia pewnych wartości ze znaczników stojących wyżej.