Selektory w CSS – zbiór

W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline'. Poniżej przedstawione zostały rodzaje selektorów.

SelektorPrzykładOpis selektora
**Wszystkie elementy na stronie
.class.titleElementy zawierająca klasę .title
#id#headerElement zawierający identyfikator #header
elementsectionKażdy element będący sekcją
.class.class2.title.activeElementy zawierające jednocześnie klasę .title i .active
.class .class2.rows .itemElementy zawierające klasę .item, których rodzicem jest element zawierający klasę .rows
element.classsection.titleSekcja zawierająca klasę .title
element,element2section, headerKażda sekcja oraz header
element elementdiv pKażdy paragraf wewnątrz każdego div’a
element > elementsection > pParagraf, którego najbliższym, bezpośrednim rodzicem jest sekcja.
element1 ~ element2section ~ pParagrafy bezpośrednio poprzedzone sekcją
element + elementsection + pPierwszy paragraf bezpośrednio poprzedzony sekcją
[attribute][href]Każdy element zawierający atrybut href, czyli wszystkie linki
[attribute=value][href=”#”]Każdy element z atrybutem href, który zawiera dokładnie #
[attribute~=value][href=”site”]Każdy link, który zawiera w sobie frazę site
[attribute^=value][href^=”https”]Każdy element którego atrybut href zaczyna się od https
[attribute$=value][href^=”.csv”]Każdy link kończący się .csv
[attribute*=value][class*=”col”]Każdy element z klasą zawierającą col
:activea:activeOznacza aktywny link
:afterdiv:afterDodaje pseudoelement after po zawartości każdego div’a
:beforediv:beforeDodaje pseudoelement before przed zawartością każdego div’a
:checked:checkedOznaczy każdy zaznaczony checkbox lub radio
:disabledinput:disabledOznacza wyłączone pole tekstowe
:emptydiv:emptyOznacza pusty div
:enabledinput:enabledOznacza dostępne pole tekstowe
:first-childul li:first-childKażde pierwsze dziecko na liście
:last-childdiv p:last-childOstatni paragraf w div’ie
:first-letterp:first-letterOznacza pierwszy znak w paragrafie
:first-linep:first-lineOznacza pierwszą linię w paragrafie
:first-of-typeul li:first-of-typeOznacza pierwszy element typu li
:last-of-typeul li:last-of-typeOznacza ostatni element typu li
:focusinput:focusZaznaczone pole tekstowe
:hovera:hoverOznacza styl najechanego myszą linku
:in-rangeinput:in-rangeOznacza pole tekstowe lub numeryczne, gdy wartość jest w zakresie min/max
:out-of-rangeinput:out-of-rangeOznacza pole tekstowe lub numeryczne, gdy wartość jest poza zakresem min/max
:indeterminateinput:indeterminateOznacza pole będące w nieokreślonym stanie
:invalidinput:invalidOznacza pole, w które wprowadzono nieprawidłową wartość
:visiteda:visitedOznaczy odwiedzony link
:linka:linkKażdy nieodwiedzony link
::markerul li::markerStyl punktora listy
:not:not(:last-child)Funkcja oznaczy każdy nieostatni element
:nth-child:nth-child(3n)Funkcja oznaczy co 3 elemetn
:nth-last-child:nth-last-child(2)Funkcja oznaczy 2 element od końca
:nth-last-of-type:nth-last-of-type(2)Funkcja oznaczy 2 element danego typu od końca
:nth-of-type:nth-of-type(3)Funkcja oznaczy 3 element danego typu
:only-of-typep:only-of-typeOznaczy tylko paragraf będący jedynym dzieckiem danego typu w kontenerze
:only-childspan:only-childOznaczy tylko span będący jedynym dzieckiem w kontenerze
:optionalinput:optionalPole input nieoznaczone jako wymagane (required)
::placeholderinput::placeholderStyl dla placeholder’a
:read-onlyinput:read-onlyOznaczy element oznaczony tylko do odczytu
:requiredinput:requiredOznaczy pole wymagane
:root:rootStyl dla tzw. root’a dokumentu
::selection::selectionStyl dla zaznaczonego tekstu
:target#header:targetStyl dla aktywnej kotwicy
:validinput:validStyl dla poprawnie wypełnionego pola