Selektory CSS

Dzisiaj mam dla Ciebie, przechodniu, drobną ściągawkę z różnych selektorów CSS. Coś co pomaga mi (i Tobie też pomoże) w nadmiarowym bólu głowy przy tworzeniu wyglądu strony. Pomaga, gdy zastanawiam się czy mogę coś użyć czy nie... I czy aby na pewno potrzebuję jeszcze klasy parzysty-wiersz, czy jednak mogę w danym wypadku użyć po prostu nth-child(2n)...

Wszystko sprowadza się – niestety – do tego którą wersję Internet Explorera musisz wspierać. Gdy tworzysz projekt witryny, czy aplikacji webowej warto odpowiedź sobie też na pytanie – co musi działać (bo inaczej strona będzie bezużyteczna), a co jest tylko kwiatuszkiem do kożucha. Kwiatuszkiem, który być może nie należy się tym, którzy uparcie tkwią przy starej przeglądarce ;-].

IE6+

Mam nadzieję, że już nikt nie musi wspierać IE6, ale dla formalności...

Proste selektory

• div – element o nazwie div
• div.test – element div z klasą test
• div#test – element div z id test
• div span – element span zawarty w elemencie div (niekoniecznie bezpośrednio – div jest dowolnym przodkiem)

Mniej popularne, a przydatne

• p::first-line – pierwszy wiersz paragrafu
• a:link – a, który nie był odwiedzany
• a:visited – odwiedzony link (zasadniczo działa, ale nie może być odczytany przez JS ze względów bezpieczeństwa).

IE7+

Jeśli do tej pory drżałeś(-aś) by wejść wyżej, to te konstrukcje mogą nie być Ci znane. Warto jednak pamięć, że IE6 upadł tak nisko, że nie jest już nawet notowany w statystykach z polski (ranking.pl).

Podstawy

• div.test.inna – element div z dwoma klasami jednocześnie: test i inna.
• div > p – element p będący dzieckiem div
• div ~ p – element p będący po elemencie div
• div:hover – div po najechaniu myszką (IE 5/6 tylko linki). To coś z serii – seriously? No niestety poważnie, to nie działało w IE6.

Zabawa się zaczyna...

• input[checked] – element input posiadający atrybut checked
• input[type=text] – element input posiadający atrybut type równy dokładnie text.
• div[class~=test] – ekwiwalent div.test, ale ten zapis umożliwia wykorzystanie innych atrybutów (np. data-roles="page dialog") ze słowami (en) rozdzielonymi spacjami.
• div[data-role^=icon-] – div z atrybutem data-role zaczynającym się od icon-.
• div[data-role$=menu] – div z atrybutem data-role kończącym się na menu.
• a[href*=//enux.pl/] – a z atrybutem href zawierającym //enux.pl/.
• div[lang|="en"] – (zaszłość) elementy div z lang równym en lub zaczynające się od en-. Jest zaszłością z CSS2, w CSS3 można użyć np. div[lang^=en-], div[lang=en].

IE8+

• p:after, p:before – sztuczne elementy, które mogą być użyte do wstawienia zawartości przed/po p.

  • Zawartość dodaje się poprzez właściwość content. Na przykład: content:"jakiś teksts" lub content:url(ikonka.png).
  • Zawartość można ostylować dodatkowymi właściwościami.
  • Element p:after należy traktować jako zwykły element, czyli tak jakby po p znajdował się span.
  • Ciekawym zastosowaniem jest dodanie clear:both po floatowanych elementach.

• body::selection,body::-moz-selection – styl dla zaznaczonego tekstu (np. kolor tekstu i tła). Jeśli zastanawialiście się kiedyś dlaczego znaczony tekst jest różowy... ;-)

• input:focus – aktywny element. Tak, serio. Dopiero w IE8.

IE9+

Ciekawostki

Raczej ciekawostki, bo nie pamiętam, żebym kiedyś użył. Chociaż empty można by np. wykorzystać jako stan przed wrzuceniem elementu (np. do ustawienia tła pustego koszyka).

• div + p – element p będący bezpośrednio po elemencie div (p jest sąsiadem div). Niby można by także użyć w IE7+, ale tylko jeśli jest używane w statycznie budowanej stronie.
• div:not – nie div
• div:empty – pusty div
• p:only-child – paragraf, który jest jedynym elementem rodzica.
• p:only-of-type – paragraf, który jest jedynakiem (inne typy nie są liczone).

Określenie pozycji elementu!

Ważna grupa, bo pozwala się pozbyć wielu dziwnych klas typu (wspomniany już) parzysty-wiersz, ale także pierwszy-wiersz, ostani-wiersz itp. Używane często w tabelach do zwiększenia ich czytelności lub dodania nietypowej ramki.

• p:first-child, p:last-child – pierwszy/ostatni paragraf, ale tylko jeśli jest pierwszym/ostatnim elementem (elementy tekstowe nie są wliczane). Np. jeśli przed pierwszym paragrafem jest tekst, to reguła działa, jeśli przed pierwszym paragrafem jest div, albo nawet br, to reguła nie złapie paragrafu.
• p:first-of-type, p:last-of-type – jak wyżej, ale liczone są tylko elementy danego typu (w tym wypadku paragrafy – niezależnie od tego co oprócz paragrafów jest w danym elemencie). W obu przypadkach liczeni są tylko bezpośredni potomkowie.
• li:nth-child(an+b), li:nth-of-type(an+b) – w wypadku list oba powinny być identyczne i oznaczają elementy, których numer w rodzicu spełnia podaną regułę (np. 2n – parzyste, 2n+1 – nieparzyste).

Status elementów formularzy

Tu szczególnie disabled do wyszarzenia/wyróżnienia nieaktywnych elementów.

• input:checked – zaznaczone checkboksy.
• input:disabled – wyłączone elementy.
• input:enabled – włączone elementy.

IE10+

Dodaję poniższe, chociaż walidacja jest na tyle ważna, że nie spełnia mojego kryterium odcinania użytkowników ze starą przeglądarką. Informacja o poprawności pól jest po prostu zbyt istotna, żeby odcinać od niej wszystkich z IE9, IE8 i starszymi.

• :invalid, :optional, :required, :valid – coś do walidacji elementów. Niby działają, ale niekoniecznie zgodnie z oczekiwaniami. Np. wpisanie litery w input o typie number nie czyni go invalid. Liczy się tylko czy wartość jest zgodna z pattern, czyli oczekiwanym wzorcem.

A gdzie reszta?

Jeśli wydaje Ci się, że lista ta jest skrócona – masz rację! CSS jest bogatym językiem, ale moim zdaniem jego siła tkwi raczej w kombinacji prostych selektorów. Warto mieć świadomość, że nic nie jest za darmo – bardziej skomplikowane selektory powodują zwiększenie obciążenia komputera (urządzenia) użytkownika. Jednocześnie jednak dodawanie elementów na stronie także powoduje obciążenie. Trzeba to rozsądnie wyważyć.

To powiedziawszy zapraszam do odwiedzin Quirks Mode, gdzie znajdziesz: źródłowe kompendium wiedzy kompatybilności selektorów CSS i nie tylko...