Selektory#

Wstęp#

Selektory są motorem napędowym dla Kaskadowych Arkuszy Stylów. Oferują bardzo wygodny i elastyczny mechanizm wyboru elementów lub grupy elementów, którym następnie możemy przypisać określone style. Znajomość selektorów przy tworzeniu stron i aplikacji internetowych jest kluczowa, zarówno z punktów widzenia technologii CSS, JavaScript/DOM, jak i innych narzędzi z nich korzystających.

To właśnie ze względu na selektory postanowiłem utworzyć osobny kurs poświęcony językowi CSS. W pewnym sensie dział ten będzie uzupełnieniem dla API selektorów w DOM i narzędzia Zen Coding.

Selektory zostały wprowadzone już w pierwszej wersji języka CSS. Z każdą kolejną wersją są poprawiane i rozbudowywane, przez co ich liczba stale się zwiększa. Aktualne opisy selektorów znajdują się w następujących dokumentach:

Swoje opracowanie oprę na wszystkich powyższych dokumentach i innych niezależnych materiałach, do których uda mi się dotrzeć. Punktem odniesienie będzie jednak specyfikacja 4 poziomu selektorów, gdyż wprowadzone tam nowości są źródłem informacji dla przyszłych modułów CSS i pozostałych specyfikacji W3C. Trzeba jedynie pamiętać o tym, że wciąż jest to szkic edytorski (bieżąca wersja szkicu roboczego), dlatego można spodziewać się jeszcze wielu jego modyfikacji.

Temat jest dość obszerny, dlatego też całość podzielona zostanie na wiele podstron. Mam nadzieję, że uda mi się zachować spójność treści.

Pisząc "specyfikacja", "specyfikacja W3C", "najnowszy moduł", "najnowszy poziom", lub używając odmiany słowa "Selektory" (zapis z dużej litery), itp., mam na myśli dokument "Selectors Level 4". W każdym innym przypadku użyję konkretnej nazwy.

Budowa i sposób użycia#

Selektor to specjalne polecenie, które występuje przed blokiem deklaracji w regule wykwalifikowanej. Całość można wyrazić za pomocą uproszczonego zapisu składniowego:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
selektor { /* deklaracje */ }

Selektor wybiera pasujące elementy w dokumentach XML i HTML, do których deklaracje powinny być zastosowane. Z perspektywy DOM elementami będą obiekty implementujące interfejs Element, lub obiekty, które dziedziczą po interfejsie Element. Upraszczając temat, wybieramy po prostu dowolne znaczniki HTML, na formatowaniu których nam zależy (np. <p>, <div>, <span> itd.).

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
/* Elementy (X)HTML */
p {color: red;}
DIV {color: yellow;}

/* Elementy XML */
root {color: red;}
SAMPLE {color: yellow;}

W przypadku XML-a selektorem może być cokolwiek, ponieważ XML pozwala na tworzenie nowych języków znaczników, które jako nazwę elementu mogą zawierać dowolną treść. Dla konkretnych aplikacji XML lub HTML-a mamy z góry określoną liczbę dostępnych elementów.

Powyższy przykład nie cechuje się niczym szczególnym. Prawdziwą siłą selektorów jest ich spory zestaw oraz możliwość łączenia za pomocą kombinatorów. W efekcie otrzymujemy niezwykle elastyczny mechanizm wyboru elementów, bazujący nie tylko na samych nazwach elementów, ale i relacjach między nimi, określonych cechach, czy też pewnych specyficznych zachowaniach użytkownika.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
#box div > p.example span[class] + strong {color: red; font-weight: bold;}

Na pierwszy rzut oka może to wyglądać jak jakieś skomplikowane wyrażenie regularne, ale w praktyce okazuje się bardzo proste w użyciu, wystarczy podstawowa znajomość każdego rodzaju selektora.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Wstęp (H2) Budowa i sposób użycia (H3)