Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne
selektory pseudoklas | selektory pseudoelementów
Selektory, o których powiedzieliśmy wstępnie w rozdziale Budowa stylu, należą do kluczowych pojęć Cascading Style Sheets. To one właśnie wskazują obiekty, którym przypisujemy jakiś zestaw własności. Selektorem może być dowolny element języka HTML. Przykładem jest choćby element p, który w języku HTML, jak wiadomo, oznacza akapit, albo ul, czyli wykaz nieuporządkowany. Jest to tzw. selektor prosty (por. inne selektory).
Ogólna konstrukcja stylu ma następującą postać:
selektor { cecha: wartość }
W języku angielskim: selector { property: value }
Widać z tego, że selektor pełni tutaj zasadniczą rolę określając, jakiemu elementowi przypiszemy pewne własności. Gdybyśmy chcieli przypisać akapitowi czcionkę Helvetica o rozmiarze 12pt, powinniśmy to zdefiniować następująco:
p { font-family: Helvetica; font-size: 12pt; }
Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego, definicja powinna wyglądać następująco:
ul { font-weight: bold; color: #FF0000; }
Pojęcie selektora jest więc proste i zrozumienie jego znaczenia nie powinno przysparzać żadnych trudności.
Te same wartości stylu możemy nadać jednocześnie kilku selektorom, wyliczając ich listę przed deklaracją własności i wartości. Na przykład, chcąc przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast definiować każdy tytuł z osobna, możemy napisać:
h1, h2, h3 {font-family:Helvetica; color:blue; }
Zwróćmy uwagę na przecinki rozdzielające selektory.