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.