CO TO SĄ SELEKTORY CSS?
Nie zawsze chcemy sprawić, aby wszystkie div
na naszej stronie miały zielone tło. Używamy więc selektorów, aby jeden element odróżnić od innych. Selektorem może być np. klasa, id i wiele innych.
Zdarza się także, że mamy kilka div
o klasie np. green. Ale jeden z nich ma mieć dodatkową czarną ramkę a pozostałe nie. W takiej sytuacji należy skorzystać z selektorów css, które przedstawię poniżej w tabeli.
LISTA SELEKTORÓW CSS
selektor | przykład | wyjaśnienie |
---|---|---|
.class | .main | zaznacza wszystkie elementy o klasie „main” |
#id | #page_header | zaznacza wszystkie elementy o id=”page_header” |
* | * | zaznacza wszystkie elementy na stronie |
element | span | zaznacza wszystkie elementy span |
element, element | p, span, div | zaznacza wszystkie elementy p, div i span |
element element | header p | zaznacza wszystkie elementy p w headerze |
element > element | div, p | zaznacza wszystkie p, których rodzicem jest div |
element+element | div+h2 | zaznacza wszystkie h2, które występują bezpośrednio za divem |
element1~element2 | p~ul | zaznacza wszystkie ul, które są poprzedzone elementem p |
[atrybut] | [target] | zaznacza wszystkie elementy z atrybutem target |
[atrybut=wartość] | [target=_blank] | zaznacza wszystkie elementy z target=blank |
:active | :active | zaznacza wszystkie elementy aktywne |
:hover | :hover | zaznacza wszystkie elementy, na które najeżdża myszka |
:first-child | p:first-child | zaznacza wszystkie p, które są pierwszymi elementami w swoim rodzicu |
::first-letter | p::first-letter | zaznacza pierwszą literę każdego p |
::first-line | p::first-line | zaznacza pierwszą linię każdego p |
:last-of-type | p:last-of-type | zaznacza wszystkie ostatnie p w jego rodzicu |
:first-of-type | p:first-of-type | zaznacza wszystkie pierwsze p w jego rodzicu |
:not(selektor) | :not(p) | zaznacza wszystkie elementy opróćz p |
:nth-of-type(n) | p:nth-of-type(2) | zaznacza wszystkie drugie p w jego rodzicu |
:not(selektor) | :not(p) | zaznacza wszystkie elementy oprócz p |
:visited | a:visited | zaznacza wszystkie odwiedzone linki |
To nie są wszystkie selektory, których możemy używać w css. Wybrałam jednak te, które wg. mnie są najpopularniejsze.