Selektory CSS 2.1 – część 1

Pierwszą rzeczą jakiej powinniśmy się nauczyć rozpoczynając pracę z CSS są selektory. Selektory są oczywiście podstawową częścią technologii CSS, ale tylko niewielu programistów potrafi wykorzystać ich pełne możliwości. Bardzo wiele możemy osiągnąć, dzięki stosowaniu atrybutów id i class, ale to nie jedyne możliwości.

Znajomość wszystkich selektorów CSS, jakie udostępnia CSS 2.1 pozwoli nam na utrzymanie porządku w kodzie HTML. Ograniczymy dzięki temu użycie zbędnych atrybutów class i dodatkowych znaczników div i span. Brzmi ciekawie?

Zatem gdzie tkwi powód rzadkiego wykorzystania wszystkich selektorów? Otóż największym powodem jest niewystarczające wsparcie ze strony Internet Explorer, łącznie z IE 6. Pozostałe nowoczesne przeglądarki obsługują selektory CSS 2.1 w całości lub w dużym stopniu. Dlatego należy być ostrożnym, ponieważ możemy mieć kłopoty z obsługą niektórych selektorów opisanych w tym artykule.

Pocieszający jest fakt, że Internet Explorer 7 oferuje dużo lepsze wsparcie dla selektorów. Mając na uwadze to, że kiedyś będziemy w stanie wykorzystać pełne możliwości selektorów, warto najpierw poznać ich przeznaczenie.

Selektorów CSS jest tak dużo, że pojedynczy artykuł byłby zbyt długi. Dla łatwiejszego znalezienia informacji artykuł został podzielony na 3 części:

1. Część 1 wyjaśnia właściwości selektorów podstawowych, w tym selektorów: uniwersalnego, typu, id i klasy.
2. Część 2 przedstawia selektory połączone, grupowanie oraz atrybuty selektorów.
3. Część 3 opisuje wykorzystanie pseudo-klas i pseudo-elementów.

Selektor podstawowy

Zacznijmy od czegoś prostego. Selektor CSS jest wzorcem, który pasuje tylko do konkretnych elementów w strukturze dokumentu. W momencie spełnienia wszystkich warunków, deklaracje i reguły są stosowane do elementu lub elementów, spełniających dany wzorzec. Rozważmy bardzo prostą regułę CSS.

p { color:#f00; }

Selektor to częścią reguł CSS, które występują przed otwierającym nawiasem klamrowym, “{“. Obecny w przykładzie selektor p, pasuje do wszystkich paragrafów w dokumencie i sprawia, że tekst paragrafów jest czerwony. Rzeczywiście nieskomplikowane.

Przegląd selektorów

Powyższy przykład był naprawdę prosty. Pozostałe selektory zamierzam opisać w dalszej części. Jednak zanim to zrobię, poniżej zamieszczam wszystkie selektory CSS 2.1 (dane zaczerpnięte z tabeli CSS 2.1, 5.1 Pattern matching):

Przegląd selektorów CSS 2.1

Selektor	Wzorzec	Opis
Uniwersalny	*	Pasuje do dowolnego elementu.
Typ	E	Pasuje do dowolnego elementu E.
Klasa	.info	Pasuje do dowolnego elementu, którego atrybut class zawiera wartość info.
Identyfikator	#footer	Pasuje do dowolnego elemntu, którego id równa się footer.
Potomek	E F	Pasuje do dowolnego elementu F, który jest potomkiem elementu E.
Dziecko	E > F	Pasuje do dowolnego elementu F, który jest dzieckiem elementu E.
Sąsiędni	E + F	Pasuje do dowolnego elementu F występującego obok jako siostrzany element E.
Artybut	E[att]	Pasuje do dowolnego elementu E, który posiada artybut att bez względu na jego wartość.
Atrybut	E[att=val]	Pasuje do dowolnego elementu E, którego atrybut att jest dokładnie równy wartości val.
Atrybut	E[att~=val]	Pasuje do dowolnego elementu E, którego atrybut att posiada wartości rozdzielone spacjami, przy czym jeden z nich jest dokładnie równy val.
Atrybut	E[att|=val]	Pasuje do dowolnego elementu E, którego atrybut att posiada wartości rozdzielone myślnikami, przy czym pierwszy z nich jest równy val.
Pseudo-klasa :first-child	E:first-child	Pasuje do elementu E kiedy E jest pierwszym dzieckiem, swego rodzica.
Pseudo-klasa :link	E:link E:visited	Pasuje do nie odwiedzonych (:link) lub właśnie odwiedzonych (:visited) linków.
Pseudo-klasa :active	E:active E:hover E:focus	Pasuje do elementu E spełniającego określone warunki.
Pseudo-klasa :lang	E:lang(c)	Pasuje do elementu E, który jest napisany w języku c.
Pseudo-klasa :first-line	E:first-line	Pasuje do zawartości pierwszej linii danego elementu E.
Pseudo-element :first-letter	E:first-letter	Pasuje do pierwszej litery danego elementu E.
Pseudo-elementy :before i :after	E:before E:after	Używane do wstawiania generowanej zawartości przed i po zawartości elementu E.

Wszystkie spośród tych selektorów opiszę szczegółowo w dalszej części artykułu. Niektóre z określeń, występujące w powyższej tabeli, jak również w dalszej części artykułu wymagają wyjaśnienia.

potomek

Element, który jest dzieckiem, wnukiem lub kolejnym potomkiem elementu w strukturze dokumentu.

przodek

Element, który jest rodzicem, dziadkiem lub wcześniejszym przodkiem elementu w strukturze dokumentu.

dziecko

Bezpośredni potomek danego elementu. Żaden inny element nie może znajdować się pomiędzy nimi.

rodzic

Bezpośredni przodek danego elementu. Żaden inny element nie może znajdować się pomiędzy nimi.

rodzeństwo

Element, który ma tego samego rodzica, co aktualny element.

Selektory proste i połączone

Selektory dzielimy na dwie główne kategorie: selektory proste i selektory połączone.

Selektor prosty składa się z selektora typu lub selektora uniwersalnego, po którym występuje zero lub więcej atrybutów, identyfikatorów lub pseudo-klas. Poniższa reguła jest przykładem selektora prostego:

p.info { background:#ff0; }

Selektor połączony (czasami nazywany selektorem kontekstowym) składa się z dwóch lub więcej rozdzielonych selektorów prostych. Poniżej mamy prosty przykład selektora połączonego:

div p { font-weight:bold; }

Powyższa reguła znajdzie zastosowanie do wszystkich elementów p które są potomkami elementu div.

Do selektora możemy dołączyć jeden pseudo-element. W przypadku selektora połączonego, dołączany pseudo-element musi znajdować się za ostatnim selektorem prostym.

Szczegóły dotyczące selektorów połączonych, samych połączeń oraz pseudo elementów znajdziemy w części 2 oraz części 3 tej serii.

Selektor uniwersalny

Uniwersalny selektor jest reprezentowany przez gwiazdkę, “*”, tym samym pasuje do wszystkich elementów w strukturze dokumentu. Dosyć trudno znaleźć go w stylach kaskadowych, ale selektor uniwersalny jest aktualnie często wykorzystywany z selektorem klasy i identyfikatora. Jeżeli selektor uniwersalny nie jest jedynym składnikiem selektora prostego to znak “*” możemy pominąć:

• .myclass jest odpowiednikiem *.myclass
• #myid jest odpowiednikiem *#myid

Jeden z popularnych sposobów wykorzystania selektora uniwersalnego to ustawienie zerowego marginesu oraz zerowego dopełnienia dla wszystkich elementów:

* { margin:0; padding:0; }

Opisana technika nosi czasami nazwę Global White Space Reset.

Selektor typu

Selektor typu pasuje do każdego elementu danego typu w dokumencie. Poniższa reguła pasuje zatem do wszystkich paragrafów w dokumencie i ustawia rozmiar czcionki w paragrafach na 2em:

p { font-size:2em; }

Selektor klasy

Selektor klasy jest reprezentowany przez znak kropki, “.”, tym samym elementu pasujące do danej klasy posiadają atrybut class z odpowiednią wartością. Następna reguła będzie stosowana do elementów p, należących do klasy “info”:

p.info { background:#ff0; }

Możemy określić kilka klas dla danego elementu. Atrybut class przechowuje wymagane nazwy klas rozdzielone znakiem spacji. Wówczas selektor klasy będzie odnosił się jedynie do tych elementów, które mają wymienione nazwy klas. Podana niżej reguła pasuje do elementów p, które posiadają obie wartości “info” oraz “error” w atrybucie klasy:

p.info.error { color:#900; font-weight:bold; }

Uwaga: Selektory wielokrotnych klas nie działają w Internet Explorer 6, ale mają być wspierane w IE7.

Typ elementu nie musi być określony. Pozostawienie wolnego typu jest równoznaczne z użyciem selektora uniwersalnego zamiast selektora typu. Poniższa reguła będzie odnosiła się do wszystkich elementów klasy “info”, bez względu na ich typ:

.info { background:#ff0; }

Selektor identyfikatora

Selektor identyfikatora jest reprezentowany przez znak kratki, “#”, a odnosi się do elementów posiadających odpowiednią wartość atrybutu id. value. Kolejna reguła pasuje do wszystkich elementów, które mają atrybut id równy “info”, bez względu jakiego typu jest dany element:

#info { background:#ff0; }

Jeżeli dodatkowo określimy typ elementu, to reguła będzie obowiązywać tylko konkretny element.:

p#info { background:#ff0; }

Ważne jest, aby pamiętać o wyższości identyfikatora nad selektorem klasy. Wartość każdego identyfikatora musi być unikatowa w całym dokumencie, kiedy klasa może pojawić się wielokrotnie. Wówczas selektor identyfikatora stosuje się tylko do jednego elementu w strukturze dokumentu.

Ciąg dalszy…

W pierwszej części poznaliśmy podstawowe selektory. Część 2 tego artykułu zawiera szczegółowy opis selektorów połączonych, jak również grupowania i atrybutów selektorów. Część 3 pozwoli nam na poznanie właściwości pseudo-klas i pseudo-elementów.

Ten artykuł jest tłumaczeniem oryginalnego tekstu CSS 2.1 selectors, Part 1, którego autorem jest Roger Johansson.