Selektory CSS

Większość osób używających CSS posługuje się kilkoma podstawowymi selektorami, a przecież ich ilość jest znacznie większa. Wraz z ilością używanych selektorów rosną możliwości formatowania różnych elementów na stronie.

Zachęcam do przetestowania poniższych selektorów i dzielenia się uwagami na dole strony.

selektor typu np. p

ustala określone cechy dla wszystkich elementów p

selektor uniwersalny *

pozwala ustalić określone cechy dla wszystkich elementów strony

selektor potomka np. td li

ustala określone cechy dla elementów li leżących wewnątrz elementów td niekoniecznie bezpośrednio.

selektor dziecka np. div > p

ustala określone cechy dla elementów p leżących bezpośrednio wewnątrz elementów div.

selektor braci np. span + a

ustala określone cechy elementów a leżących bezpośrednio za elementami span.

grupowanie selektorów np. h2, h3

ustala określone cechy dla wymienionych elementów

prosty selektor atrybutu np.: h3[class]

ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class. Można podać kilka atrybutów, wtedy cechy elementu będą ustalone jeżeli element ma ustalone wszystkie wymienione atrybuty np.: h3[class][title]

selektor atrybutu o określonej wartości np.: h3[class=”header”]

ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class na header. Analogicznie jak w poprzednim wypadku można podać kilka atrybutów z wartościami lub bez.

selektor klasy np.: .header

ustala określone cechy dla elementów jeżeli mają atrybut class ustawiony na header.

selektor identyfikatora np.: #jeden

ustala określone cechy dla elementu o wartości atrybutu id ustawionym na jeden. Identyfikator musi jednoznacznie określać tylko jeden element w dokumencie.

pierwsza linia np.: p:first-line

ustala określone cechy dla pierwszej linii elementów p

pierwsza litera np.: p:first-letter

ustala określone cechy pierwszej literze elementów p jeżeli ich zawartość rozpoczyna tekst.

selektor przed np.: p:before

wstawia podaną zawartość przed elementami p.

selektor po np.: p:after

wstawia podaną zawartość po elementach p.

selektor podstawowy np.: a:link

ustala określone cechy dla nie klikanych elementów a.

selektor odwiedzony np.: a:visited

ustala określone cechy dla klikniętych elementów a.

selektor wskazany np.: a:hover

ustala określone cechy dla elementów a wskazanych myszą.

selektor aktywny np.: a:active

ustala określone cechy dla klikanych elementów a.

selektor zogniskowania np.: a:focus

ustala określone cechy dla elementu a wybranego klawiszem tabulacji (oprócz odnośników stosuje się do pól formularzy, w których umieszczono kursor).

selektor pierwszego dziecka np.: div:first-child

ustala określone cechy dla pierwszego elementu div

Selektory można ze sobą łączyć. Należy przy tym uważać na spacje. Selektor „p .opis” wskazuje inne elementy niż „p.opis”. Pierwszy wskazuje na elementy klasy opis zawarte w znacznikach p, a drugi wskazuje na znaczniki p z ustawioną klasą opis.

Uwaga!!! Nową stronę należy przetestować w różnych przeglądarkach. Zwłaszcza w IE 6 nie wszystkie selektory działają. Na szczęście ta przeglądarka mocno traci na popularności i w zasadzie można ją już pominąć.

Tagi: CSS

Ten wpis został opublikowany sobota, 3 Kwiecień 2010 o 20:32 i jest zaszufladkowany do kategorii Darmowe artykuły, Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.