Selektory CSS
Przykłady
Wszystkie bezpośrednie dzieci elementu section
section > * {margin: 0 10px;}
Zmiana tła koloru żółtego na biały w input (tylko WebKit)
input:-webkit-autofill {color:#fff !important;}
Selektory
Selektor potomka
znacznik1 znacznik2
Znacznik2 musi być potomkiem elementu znacznik1, to znaczy, że ma znajdować się w elemencie, który został wskazany przez pierwszy selektor.
Selektor dziecka >
znacznik1 > znacznik2
Znacznik2 musi być dzieckiem elementu znacznik1, to znaczy, że ma znajdować się bezpośrednio w elemencie, który został wskazany przez pierwszy selektor.
Selektor sąsiadującego brata +
znacznik1 + znacznik2
Znacznik2 musi się znajdować bezpośrednio za swoim bratem znacznik1, to znaczy, że ma występować bezpośrednio po elemencie, który został wskazany przez pierwszy selektor.
Selektor braci ~
znacznik1 ~ znacznik2
Znacznik2 musi się znajdować za swoim bratem znacznik1, choć niekoniecznie bezpośrednio za nim.
Selektor uniwersalny *
znacznik1 *
znacznik1 * wnuk_znacznika1
Selektor uniwersalny odnosi się do każdego elementu.
Selektor nazwy atrybutu
nazwaZnacznika[nazwaAtrybutu]
img[title] {border: 2px solid blue;}
Selektor odnosi się do nazwy znacznika, który posiada atrybut o podanej nazwie.
Selektor wartości atrybutu
nazwaZnacznika[nazwaAtrybutu="wartośćAtrybutu"]
img[title="red flower"] {border: 2px solid blue;}
input[type=submit] {...}
Selektor odnosi się do nazwy znacznika, który posiada atrybut o podanej nazwie i danej wartości.
atrybut^=wartość
pasuje do atrybutów zaczynających się od podanej wartości (np. a[href^="http:"]
pasuje do odnośników z absolutnym URI)
atrybut$=wartość
pasuje do atrybutów kończących się na podaną wartość (np. a[href$=".pdf"]
pasuje do odnośników do dokumentów PDF)
atrybut*=wartość
pasuje do atrybutów zawierających podaną wartość choć w części (np. w środku – a[href*="on"]
pasuje do odnośników: …/monitor…
oraz …/koncepcja…
)
atrybut~=wartość
pasuje do atrybutów zawierających wartość na liście wartości rozdzielonych spacjami (np. p[class~=t1]
pasuje do <p class="r1 s2 t1 u3">
)
atrybut|=wartość
pasuje do atrybutów zawierających wartość na liście wartości zawierających łączniki (np. p[class|=en]
pasuje do <p class="en-GB">
)
Klasy
Selektor znacznika należącego do wybranej klasy
p.specialtext {color:red;}
p.specialtext span {color:green;}
Selektor wieloklasowy
.specialtext.featured {font-size:120%;}