Zaimplementowane selektory CSS3

Drobna uwaga - większość z podanych niżej selektorów działa na chwilę obecną tylko w przeglądarkach opartych o Gecko (Mozilla). Jednak inni producenci przeglądarek nie są daleko z tyłu.

Jak już wspominałem, w CSS3 otrzymaliśmy trzy nowe selektory.

Pierwszy z nich dopasowuje się do elementów rozpoczynających się danym ciągiem. Na przykład jeśli chcemy na stronie by linki do stron WWW wyglądały inaczej niż do plików znajdujących się na serwerach ftp, wpiszemy:

  • a[href=^="http://"]{background: #000;}

By ostylować elementy kończącę się danym ciągiem, tak jak chociażby w moim przykładzie tworzenia informacji o typach plików, wpisujemy:

  • a[href$=".html"]{text-decoration: underline;}

CSS3 posiada także selektor dopasowujący elementy w oparciu o żądany ciąg, niezależnie od tego gdzie jest on umieszczony i czym oddzielony. Dla przykładu, jeśli chcielibyśmy wyróżnić obrazki znajdujące się w katalogu /i/nature od tych, które znajdują się w katalogu /i/ możemy napisać:

  • img[src*="nature"]{background-color: #00b;}

Dodatkowo wraz z CSS3 otrzymaliśmy kilka pseudo-klas. Jedną z nich jest selektor :root pozwalający wybrać element główny z drzewa dokumentu. W przypadku HTML będzie to <html>. Selektor ten jest bardzo przydatny w przypadku XML, gdyż pozwala wybrać element główny bez konieczności znania jego nazwy. By zmienić stylowanie elementu <html> możemy wpisać:

  • :root{overflow: auto;}

Jako uzupełnienie selektora :first-child, dodano selektor :last-child, wybierający ostatnie “dziecko” rodzica. Jedno z możliwych zastosowań to chociażby magazyn internetowy, strona domowa czy blog, w którym mamy notki umieszczone w elemencie, załóżmy .note: pierwszy paragraf zawiera wstęp a ostatni informację o autorze. Jedno z możliwych stylowań takiej sytuacji mogłoby wyglądać:

  • div.note > p:first-child{font-weight: bold; font-size: 120%;}
  • div.note > p:last-child{font-size: 90%;}

Lecz to nie wszystko co oferuje nam CSS3. Wyobraźmy sobie sytuację, w której mamy zbiór elementów na stronie i jakieś odnoszące się do nich menu. Chcielibyśmy, by użytkownik klikając link w menu, był grzecznie zaprowadzony do danego elementu, a w tym elemencie chcielibyśmy wyróżnić istotne fragmenty tekstu. Posłuży nam do tego nowy selektor :target

  • <a href="#sekcja1">lorem?</a>
  • ...
  • jakiś
  • kod
  • ...
  • <div id="sekcja1">lorem <span class="ważne">ipsum!</span>

CSS dla takiej sytuacji wyglądałby chociażby tak:

  • div#sekcja1:target > span.ważne {font-size: 200%; color: #900;}

Jako uzupełnienie bezpośredniego kombinatora braci, wprowadzono pośredni kombinator braci (~). Kombinatora tego używamy w sytuacji w której chcemy oznaczyć dwa sąsiadujące elementy tego samego rodzica gdy drugi występuje po pierwszym, ale nie bezpośrednio. Załóżmy, że chcemy wyróżnić tt ale tylko tt nie zawarte w tabeli.

  • tt{font-size: 120%;}
  • table ~ tt {font-size: 100%;}

Na koniec wspomnę jeszcze o selektorze negacji (:not), wybierającym elementy, które nie spełniają odpowiedniego warunku. Załóżmy, że chcemy dodać obramowanie wokół obrazków, którym nie dopisano atrybutu border:

  • img:not([border]){border: 1;}

Czysto teoretycznie: z pomocą tego selektora możemy zrobić prosty debugger informujący nas, że zapomnieliśmy o jakimś atrybucie dla elementu.