[#] Selektory CSS

( Ostatnio zmieniony śr., 11/06/2008 - 09:47 )
 

Selektory

Selektory używane są przy definiowaniu arkusza stylów. Są to wskaźniki, określające konkretnie, dla których elementów strony definiowany jest styl. Selektory można stosować na kilka sposobów. Ogólna składnia jest następująca:

<var>[selektor]</var> {<var>[definicja stylów]</var>}

Jeżeli kilka selektorów ma mieć tą samą deklarację stylów, można je zgrupować w jedną definicje. Poszczególne selektory należy wówczas oddzielić przecinkami:

selektor1, selektor2, selektor3 { <var>[definicja stylów]</var> }

Selektory elementów

uniwersalny selektor

*

CSS 2.0, 2.1, 3.0 | IE5.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor prosty

[element]

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor potomka

[element] [element]

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor dziecka

[element] &gt; [element]

CSS 2.0, 2.1, 3.0 | IEIE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor braci

[element] + [element]

CSS 2.0, 2.1, 3.0 | IEIE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O5.0+

selektor młodszego brata

[element] ~ [element]

CSS 3.0 | IEIE7.0+ | NN7.2+ | MOZ1.7+ | FF0.9+ | O9.0+


Selektory specjalne

selektor ID

#[identyfikator]

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+

klasa selektorów

.[klasa]

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+


Selektory atrybutów

prosty selektor atrybutu

[atrybut]

CSS 2.0, 2.1, 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor atrybutu o określonej wartości

[atrybut=wartosc]

CSS 2.0, 2.1, 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor atrybutu o wartości z podanym wyrazem

[atrybut~=wartosc]

CSS 2.0, 2.1, 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor atrybutu o wartości z podanym tekstem zawierającm łączniki (np. w nazwach kodowych języków)

[atrybut|=wartosc]

CSS 2.0, 2.1, 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O5.0+

selektor atrybutu o wartości rozpoczynającej się określonym tekstem

[atrybut^=wartosc]

CSS 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O9.0+

selektor atrybutu o wartości kończącej się określonym tekstem

[atrybut$=wartosc]

CSS 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O9.0+

selektor atrybutu o wartości z podanym ciągiem znaków

[atrybut*=wartosc]

CSS 3.0 | IE7.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O9.0+


Pseudoklasy

selektor definiuje styl dla znaczników, które są pierwszym dzieckiem elementu nadrzędnego

:first-child

CSS 2.0, 2.1, 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+ | O7.0+

selektor definiuje styl dla znaczników, które są ostatnim dzieckiem elementu nadrzędnego

:last-child

CSS 3.0 | NN6.1+ | MOZ0.9+ | FF0.1+

selektor definiuje styl dla znaczników, które są pierwszym dzieckiem określonego typu

:first-of-type

CSS 3.0

selektor definiuje styl dla znaczników, które są ostatnim dzieckiem określonego typu

:last-of-type

CSS 3.0

selektor definiuje styl dla znaczników, które są jedynym dzieckiem elementu nadrzędnego

:only-child

CSS 3.0 | FF1.5+

selektor definiuje styl dla znaczników, które są jedynym dzieckiem określonego typu

:only-of-type

CSS 3.0

selektor definiuje styl dla znacznika będącego n-tym dzieckiem

:nth-child()

CSS 3.0

selektor definiuje styl dla znacznika będącego n-tym dzieckiem, licząc od końca

:nth-last-child()

CSS 3.0

selektor definiuje styl dla n-tego dziecka (licząc od końca) określonego typu

:nth-last-of-type()

CSS 3.0

selektor definiuje styl dla n-tego dziecka określonego typu

:nth-of-type()

CSS 3.0

selektor definiuje styl dla znacznika będącego najwyżej w strukturze

:root

CSS 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+

selektor definiuje styl dla znaczników bez zawartości

:empty

CSS 3.0 | NN6.1+ | MOZ0.9+ | FF0.1+

selektor definiuje styl dla nieodwiedzonych linków

:link

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor definiuje styl dla odwiedzonych linków

:visited

CSS 1.0, 2.0, 2.1, 3.0 | IE3.0+ | NN4.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor definiuje styl dla znaczników w momencie aktywowania

:active

CSS 1.0, 2.0, 2.1, 3.0 | IE4.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O5.0+

selektor definiuje styl dla znaczników, nad którymi znajduje się kursor myszki

:hover

CSS 2.0, 2.1, 3.0 | IE4.0+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor definiuje styl dla znaczników aktywnych

:focus

CSS 2.0, 2.1, 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+ | O7.0+

selektor definiuje styl dla znaczników, przy których ustawiona jest kotwica

:target

CSS 3.0 | NN7.1+ | MOZ1.3+ | FF0.6+

selektor definiuje styl dla znaczników, które mają ustawiony określony język

:lang([język])

CSS 2.0, 2.1, 3.0 | NN7.1+ | MOZ1.2+ | FF0.1+ | O7.5+

selektor definiuje styl dla znaczników, które reagują na interakcje

:enabled

CSS 3.0 | FF1.5+ | O9.0+

selektor definiuje styl dla znaczników, które nie reagują na interakcje

:disabled

CSS 3.0 | FF1.5+ | O9.0+

selektor definiuje styl dla zaznaczonych, wybranych pól formularza

:checked

CSS 3.0 | NN7.0+ | MOZ1.0+ | FF0.1+ | O9.0+

selektor definiuje styl dla pól formularza o domyślnym stanie

:indeterminate

CSS 3.0

selektor definiuje styl dla znaczników, których zawartość zawiera podany tekst

:contains([tekst])

CSS 3.0

selektor definiuje styl dla znaczników, które nie spełniają określonego warunku

:not([warunek])

CSS 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+

selektor definiuje styl dla pierwszej strony wydruku

:first

CSS 3.0

selektor definiuje styl dla lewej strony wydruku przy drukowaniu obustronnym

:left

CSS 3.0 | O7.0+

selektor definiuje styl dla prawej strony wydruku przy drukowaniu obustronnym

:right

CSS 3.0 | O7.0+

selektor definiuje styl dla znacznika nad którym znajduje się wskaźnik myszki podczas ‚przeciągnania‘ elementu strony

:-moz-drag-over

NN7.0+ | MOZ1.1+ | FF0.1+


Pseudoelementy

selektor definiuje styl dla pierwszego wiersza tekstu elementu

:first-line

CSS 1.0, 2.0, 2.1, 3.0 | IE5.5+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor definiuje styl dla pierwszej litery elementu

:first-letter

CSS 1.0, 2.0, 2.1, 3.0 | IE5.5+ | NN6.0+ | MOZ0.6+ | FF0.1+ | O3.5+

selektor definiuje styl dla zaznaczonej części znacznika

::selection

CSS 3.0

selektor pozwala wygenerować dynamicznie treść przed zawartością znacznika

:before

CSS 2.0, 2.1, 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor pozwala wygenerować dynamicznie treść za zawartością znacznika

:after

CSS 2.0, 2.1, 3.0 | NN6.0+ | MOZ0.6+ | FF0.1+ | O4.0+

selektor definiuje styl dla zaznaczonej części znacznika

::-moz-selection

NN7.2+ | MOZ1.5+ | FF0.7+

5
Twoja ocena: Brak Średnio: 5 (1 vote)