Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Zaawansowane selektory

  • 07.01.2011 14:00:01
  • CSS
  • 3

Selektory jakie Wam dzisiaj przedstawie nie dość, że są ciekawe, to pewnie nigdy z nich nie korzystałeś/-aś. Jeśli chodzi o mnie, to raczej nie były mi do niczego potrzebne. Często potrafią się pojawić na testach o pracę na stanowisko kodera HTML/CSS.

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;
}
Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Tomasz Kowalczyk

07.01.2011 Tomasz Kowalczyk

Bardzo, bardzo przydatny wpis, więcej takich! Szkoda tylko, że wsparcie tych funkcjonalności w różnych przeglądarkach jest... różne. Gdyby tylko cały świat był świadomy możliwości płynących z wykorzystania pełnego potencjału współczesnych języków / bibliotek / technologii, jakże prostszy byłoby nasze życie. ;]

Gavatar Kamil

08.01.2011 Kamil

Z większości tych selektorów korzystam, bo czasem są potrzebne. Nieważne czy to w CSS czy w jQuery (ew. pokrewnej bibliotece).

Oczywiście tych selektorów jest dużo więcej i Twoja lista nie jest kompletna:
http://www.w3.org/TR/css3-selectors/

Gavatar Łukasz

25.04.2012 Łukasz

Na stronie http://www.beautifulcode.pl/webmaster/css/css-3-selektory/ jest tłumaczenie specyfikacji selektorów CSS 3

Dodaj komentarz