Zaawansowane selektory

Opublikowany: 07.01.2011 14:00:01 | Komentarzy 3

Każdy zna podstawowe selektory. W większości przypadków odwołujemy się do ich unikalnych nazw (ID) lub klas (class). W sumie do szczęścia więcej nam nie potrzeba. A co jeśli mamy klienta. Klienta, który jest pedantem do tego stopnia, że gdy wprowadzi link np. do skompresowanego pliku lub PDF chce aby przy takim hiperłączu pojawiła się odpowiednia ikonka? Można powiedzieć mu, aby dodawał specjalną klasę do owego anchora - problem rozwiązany. A jeśli: nie umie, nie będzie mu się chciało za każdym razem tego robić? Najlepiej aby to robiło się samo. W takim przypadku, z pomocą przychodzą nam selektory o większych możliwościach.

"Zaawansowane" selectory

Dla CSS 2.1:

[att]

Dopasowuje, gdy element posiada atrybut "att", bez względu na jego wartość.

[att=val]

Dopasuje, gdy atrubyt "att" posiada dokładnie wartość "val".

[att~=val]

Reprezentuje element z atrybutem att którego wartością jest lista wyrazów (wartości) oddzielonych spacją (białym znakiem) i jeden z tych wyrazów (wartości) to dokładnie "val".

Natomiast w CSS3 mamy jeszcze dodatkowo:

[att^="val"]

Reprezentuje element z atrybutem att którego wartość rozpoczyna się od ciągu "val".

[att$="val"]

Dopasowuje, gdy element z atrybutem att którego wartość kończy się ciągiem "val".

[att*="val"]

Reprezentuje element z atrybutem att którego wartość zawiera podciąg "val".

Już widzicie, które rozwiązanie będzie najlepsze dla naszego, wyimaginowanego, klienta? :)

Praktyka

Kilka przykładów użycia.

a[title] {}
a[title="witaj"] {}
a[title~="witaj"] {}
a[href^="http:"] {}
a[href$=".zip"] {}

Pierwszy selektor zaznaczy wszystkie anchory, które posiadają atrybut title.

Drugi, tylko te, dla których title="witaj", ale już nie title="witaj świecie".

W trzecim przypadku zaznaczy title="witaj" i title="witaj świecie".

Czwarty przypadek zaznaczy wszystkie linki zewnętrzne, czyli te, których adres zaczyna się od http:.

Ostatni przykład jest odpowiedzią dla naszego pedantycznego klienta. Ostatecznie mógłby ten selektor wyglądać następująco:

a[href$=".pdf"] {
   background: url(/images/tla/pdf.gif) left no-repeat;
}
a[href$=".zip"] {
   background: url(/images/tla/zip.gif) left no-repeat;
}

Tagi: css3 selektory selektory css css 2.1