Selektory

Wprowadzenie

Selektory 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.

Ogólna konstrukcja stylu ma następującą postać:

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:

Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego, definicja powinna wyglądać następująco:

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

Zwróćmy uwagę na przecinki rozdzielające selektory.

Selektory elementów

Kilka ważnych pojęć:

• Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii.
• Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu.
• Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu.
• Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu.
• Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu.
• Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling).

Przykładowe drzewo:

Źródło: Cascading Style Sheets, level 2 - CSS2 Specification

Selektor ten został opisany na początku rozdziału.

Wartości ogólne (uniwersalne) można przypisywać dokumentowi na najwyższym poziomie, czyli w BODY, ale można także stosować tzw. selektory uniwersalne, oznaczane gwiazdką.

Selektor o postaci:

spowoduje, że cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany jako pogrubiony i w czerwonym kolorze.

Z kolei selektor

spowoduje, że wszystkie elementy opatrzone klasą o nazwie klasa1 będą wyświetlane za pomocą czcionki Helvetica.

Tylko IE intepretuje selektor uniwersalny.

Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawać styl tym elementom, które mają określonych przodków. Na przykład:

Oznacza to, że jeśli fragment tytułu stopnia pierwszego będzie przedstawiony za pomocą czcionki pochylonej, to automatycznie zyska on także czerwony kolor, np.

To jest tytuł pierwszego stopnia

Podobnie, definicja

spowoduje, że elementy wykazu na drugim poziomie zagnieżdżenia będą przedstawione w zielonym kolorze, podczas gdy elementy wykazu pierwszego poziomu będą miały domyślny kolor, np.

• punkt 1
• punkt 2
  • punkt 2.1
  • punkt 2.2
• punkt 3

IE interpretuje selektor kontekstowy poprawnie, natomiast NC tylko częściowo poprawnie (przykłady są sprawdzane w wersjach IE5PL i Netscape Communicator 4.6).

Zauważmy, że w definicji selektora potomka poszczególne elementy są rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2 rozróżniamy trzy rodzaje kombinatorów: spacja, znak + i znak >. Spacje wokół znaków + i > są opcjonalne.

Element jest dzieckiem w stosunku do innego elementu, jeśli jest w nim zawarty i jest o jeden szczebel niżej w hierarchii. Na przykład, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest już dzieckiem wobec H3, a nie H1 (chociaż jest zarazem potomkiem H1). Jeśli chcemy , aby wszystkie H3, które są dziećmi H1, były czerwone, użyjemy polecenia:

Żadna przeglądarka nie realizuje tego polecenia.

Selektor pozwala nadawać określone formatowanie sąsiadującym ze sobą elementom, mającym tego samego rodzica, np. fragmentowi pogrubionemu i fragmentowi pochylonemu w ramach akapitu. Stosujemy tutaj kombinator w postaci znaku +.

Polecenie nie jest na razie realizowane.

Selektory atrybutów

Selektory zostały rozszerzone na atrybuty elementów. Jak pamiętamy, elementy mogą przybierać określone atrybuty, na przykład akapit może być wyrównany do prawego marginesu (align=right). Można to wykorzystać do nadawania pewnych wartości: jeśli akapit jest wyrównany do prawej, to jest wyświetlany na czerwono.

Ogólna postać selektora atrybutów jest następująca:

Przykładowo:

Relacja może być przedstawiona czterema sposobami, co odpowiada czterem typom selektora atrybutów. Jedną z relacji jest zastosowany tu znak =.

lub

Na przykład:

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title, będzie wyświetlany za pomocą czcionki Helvetica.

Każdy element z atrybutem title (o dowolnej jego wartości) będzie wyświetlany za pomocą czcionki Helvetica.

lub

Na przykład:

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title="rozdział", będzie wyświetlany za pomocą czcionki Helvetica.

Każdy element z atrybutem title="ważne" będzie wyświetlany za pomocą czcionki pogrubionej.

Jak łatwo zauważyć, selektor atrybutu o określonej wartości różni się od prostego selektora atrybutu konkretną wartością atrybutu.

Selektor atrybutu o określonej wartości ma jeszcze dwie odmiany, które można przedstawić następująco:

W pierwszej odmianie ciąg znaków podany jako wartość może być fragmentem wartości atrybutu konkretnego elementu. Przykładowo:

Taka postać stylu będzie się odnosić do wszystkich tytułów stopnia pierwszego, w których atrybut title będzie zawierać wyraz rozdział, np. title="rozdział pierwszy", title="rozdział drugi" itd. Zwróćmy uwagę, że wyrazy w title są rozdzielone spacjami.

Druga odmiana została przewidziana do obsługi wartości zawierających dywizy (łączniki). Podanie definicji

spowoduje objęcie nią wszystkich elementów, które mają atrybut title zawierający bleble-a, bleble-b itd. Jest to wykorzystywane np. w obsłudze języków, których kody są rozróżniane, choć początek jest taki sam: en-us, en-uk.

Żadna z przeglądarek, jak na razie, nie obsługuje selektorów atrybutów.

Specjalne selektory HTML

W powyższych przykładach posłużyliśmy się prostym selektorem w postaci elementu HTML. Język CSS przewiduje jednak tworzenie tzw. klas, które pozwalają zróżnicować ten sam element zależnie od pojawiających się okoliczności. Bardzo dobrym przykładem jest tutaj ponownie element P.

Jest oczywiste, że w większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za pomocą klas i tylko w odpowiednim miejscu przywoływać stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla akapitu.

Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać:

Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia

To jest akapit pisany za pomocą normalnej czcionki. Została w nim użyta czcionka Helvetica o wielkości 10 punktów. Klasę tę możemy wykorzystać przy zapisywaniu "normalnego" tekstu, nie mającego jakichś specjalnych wyróżnień.

W jakimś miejscu możemy umieścić przypisy. Zapisujemy je za pomocą zdefiniowanej czcionki Helvetica o wysokości 8 punktów.

Gdy zajdzie konieczność podania uwag, możemy wykorzystać klasę P.uwagi, która wyróżnia się dodatkowym pogrubieniem tekstu.

Istotne fragmenty tekstu możemy w jakiś sposób wyróżnić. Tutaj korzystamy z definicji klasy P.istotne, która posługuje się czcionką Times i kolorem czerwonym.

Selektor ID (identyfikatora) został pomyślany jako narzędzie do wskazywania elementu mającego jednoznaczny atrybut ID, a więc występującego raz jeden w drzewie dokumentu. Identyfikator jest budowany z liter od a do z, cyfr, łączników i kropek, przy czym na początku musi się znajdować litera.

Przykład:

Selektory pseudoklas

CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu.

Selektor a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład:

To jest odsyłacz do firmy

Selektor a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład:

To jest odsyłacz do PCkuriera - jeśli byłeś już na stronie PCkuriera, odsyłacz będzie zielony.

Internet Explorer obsługuje oba selektory, natomiast NC obsługuje fragmentarycznie a:link.

Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go. Jest to szczególnie często wykorzystywane do zmiany wyglądu odsyłacza, co ułatwia czytelnikowi śledzenie, nad jakim odsyłaczem znajduje się w danym momencie kursor myszki.

Przykład:

To jest odsyłacz do serwisu About.com. Gdy nasuniesz kursor myszki nad odsyłacz, zmieni się jego wygląd.

Spowoduje to, że odsyłacz mający domyślnie np. niebieski kolor na białym tle, po nasunięciu kursora zostanie wyświetlony jako biały na niebieskim tle.

Selektor jest interpretowany jedynie przez IE.

Selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz.

To jest odsyłacz do serwisu World Wide Web Consortium. Gdy klikniesz na odsyłaczu, zmieni się jego wygląd (czarny odsyłacz na oliwkowym tle).

Selektor jest interpretowany tylko przez IE.

Selektor :focus formatuje w wybrany sposób element, który przyjmuje w danym momencie zogniskowanie, np. kursor na danym odsyłaczu (po wybraniu go za pomocą klawisza tabulatora) czy pole formularza, w którym znalazł się kursor.

Selektor jest obsługiwany tylko przez IE, a i to jedynie w kontekście odsyłacza hipertekstowego.

Selektor :lang pozwala formatować elementy, które mają podany atrybut języka, np.:

Żadna przeglądarka nie obsługuje tego selektora.

Pierwszym dzieckiem elementu jest pierwszy zawarty w nim element niższego szczebla. Na przykład, pierwszym dzieckiem akapitu może być pierwszy znacznik pogrubienia.

to jest akapit, a to jest pogrubienie i dalszy ciąg akapitu

Selektor

jest zawężony, gdyż wyróżnia formatowaniem jedynie elementy EM, które są pierwszym dzieckiem jakiegoś akapitu.

Żadna przeglądarka nie akceptuje tego selektora.

Selektory pseudoelementów

Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu.

Przykład:

To jest akapit, w którym pierwszy wiersz będzie zamieniony na kapitaliki. Interpretuje to Internet Explorer 5.5. To jest akapit, w którym pierwszy wiersz będzie zamieniony na kapitaliki. Interpretuje to Internet Explorer 5.5. To jest akapit, w którym pierwszy wiersz będzie zamieniony na kapitaliki. Interpretuje to Internet Explorer 5.5.

W deklaracji stylu dla :first-line można stosować następujące własności: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.

Selektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np. akapitu. Został on pomyślany przede wszystkim jako wygodne narzędzie o charakterze typograficznym, pozwalające zbliżyć wygląd strony WWW do tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np. rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu. Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów. Niestety, żadna z przeglądarek nie interpretuje tego polecenia.

Przykład:

Pierwsza litera w tym akapicie jest różna od pozostałych. Polecenie interpretuje Internet Explorer 5.5. Pierwsza litera w tym akapicie jest różna od pozostałych. Polecenie interpretuje Internet Explorer 5.5. Pierwsza litera w tym akapicie jest różna od pozostałych. Polecenie interpretuje Internet Explorer 5.5.

W deklaracji stylu dla :first-letter można stosować następujące własności: font properties, color properties, background properties, 'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.

Selektor ten pozwala automatycznie generować określoną treść przed i/lub po określonym elemencie. Na przykład, polecenie

spowoduje automatyczne wstawienie ciągów (bez cudzysłowów) "Początek akapitu: " i " :Koniec akapitu" przed i po każdym akapicie.

Polecenie

opatrzy każdy akapit o klasie class=uwaga dodatkową inwokacją "Uwaga: ".

Jako content mogą występować nie tylko zwykłe ciągi znaków (string), ale i adresy internetowe (address), liczniki (counter), apostrofy i cudzysłowy (quotes).

Żadna z przeglądarek nie obsługuje tego polecenia.

Podsumowanie

Jak widać z powyższego przeglądu, zakres selektorów w CSS2 został znacznie zwiększony w stosunku do poprzedniej specyfikacji stylów, ale ich interpretacja ciągle pozostawia sporo do życzenia, nawet w przodującym pod tym względem Internet Explorerze 5 - oficjalna specyfikacja ciągle wyprzedza jej implementację w przeglądarkach i w zasadzie można stwierdzić, że nie wyszły one poza selektory zaprezentowane w CSS1, a i to z brakami. Dochodzą jednak wieści o znacznym postępie Gecko, który będzie odpowiadać za rendering kodu HTML w kolejnej generacji przeglądarki Netscape'a - musimy jednak poczekać na konkretne efekty. Natomiast webmasterzy na razie muszą stosować selektory z niezbędną ostrożnością i sprawdzać ich działanie w wersjach 4+ obu przeglądarek.