Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

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%;}