Slektory CSS

SelektorPrzykładOpis
.class.containerWybiera wszystkie elementy zawierające klasę class="container"
.class1.class2.dropdown.openWybiera wszystkie elementy zawierające obie klasy "dropdown" oraz "open"
.class1 .class2.article .headingSelektor wybiera wszystkie elementy z klasą "heading", które znajdują się wewnątrz elementu o klasie "article"
#id#menuWybiera element o id "menu"
**Wybiera wszystkie elementy
elementdivWybiera wszystkie elementy <div>
element.classdiv.boxWybiera wszystkie elementy <div> zawierające klasę class="box"
element,elementdiv, pWybiera wszystkie elementy <div> oraz wszystkie elementy <p>
element elementdiv pSelektor wybiera wszystkie elementy <p> znajdujące się wewnątrz elementów <div>
element>elementdiv > pWybiera wszystkie elementy <p>, których rodzicem jest element <div>
element+elementdiv + pWybiera pierwszy element <p>, który znajduje się zaraz po elemencie <div>
element1~element2p ~ ulWybiera wszystkie elementy <ul>, które są poprzedzone elementem <p>
[attribute][target]Wybiera wszystkie elementy zawierające atrybut target
[attribute=value][target=_blank]Wybiera wszystkie elementy zawierające atrybut target o wartości target="_blank"
[attribute~=value][title~=flower]Wybiera wszystkie elementy z atrybutem title zawierającym słowo "flower"
[attribute|=value][lang|=en]Wybiera wszystkie elementy z atrybuten lang równym "en" lub zaczynającym się od "en-"
[attribute^=value]a[href^="https"]Wybiera wszystkie elementy <a>, których wartość atrybutu href zaczyna się od "https"
[attribute$=value]a[href$=".pdf"]Wybiera każdy element <a>, którego wartość atrybutu href kończy się na ".pdf"
[attribute*=value]a[href*="cssgenerator"]Selektor wybiera każdy element <a>, którego wartość atrybutu href zawiera ciąg znaków "cssgenerator"
:activea:activeWybiera wszystkie aktywne linki
::afterp::afterUmieszcza zawartość na końcu treści każdego elementu <p>
::beforep::beforeUmieszcza zawartość przed treścią każdego elementu <p>
:checkedinput:checkedWybiera wszystkie zaznaczone elementy <input>
:defaultinput:defaultWybiera domyślnie zaznaczony element <input>
:disabledinput:disabledWybiera wszystkie nieaktywne elementy <input>
:emptyp:emptyWybiera wszystkie elementy <p>, które nie zawierają w sobie żadnych innych elementów HTML
:enabledinput:enabledWybiera wszystkie aktywne elementy <input>
:first-childp:first-childWybiera każdy element <p>, który jest pierwszym dzieckiem rodzica
::first-letterp::first-letterSelektor wybiera pierwszą literę każdego elemenu <p>
::first-linep::first-lineWybiera pierwszą linię każdego elementu <p>
:first-of-typep:first-of-typeWybiera każdy element <p>, który jest pierwszym elementem <p> rodzica
:focusinput:focusWybiera element input, który zawiera focus
:fullscreen:fullscreenWybiera element, który jest w trybie full-screen
:hovera:hoverWybiera linki, które zostały "najechane" kursorem myszy
:in-rangeinput:in-rangeWybiera elementy input zawierające się w określonym zakresie
:indeterminateinput:indeterminateSelektor wybiera element input, który spełnia zasadę pseudoklasy :indeterminate
:invalidinput:invalidWybiera wszystkie elementy input, które zawierają niepoprawną wartość
:lang(language)p:lang(pl)Wybiera każdy element <p>, którego atrybut lang jest równy "pl"
:last-childp:last-childWybiera każdy element <p>, który jest ostatnim dzieckiem swojego rodzica
:last-of-typep:last-of-typeWybiera każdy element <p>, który jest ostatnim elementem tego typu u swojego rodzica
:linka:linkWybiera wszystkie nieodwiedzone linki
::marker::markerWybiera markery list
:not(selector):not(p)Wybiera każdy element, który nie jest elementem <p>
:nth-child(n)p:nth-child(2)Wybiera każdy element <p>, który jest drugim elementem swojego rodzica
:nth-last-child(n)p:nth-last-child(2)Wybiera każdy element <p>, który jest drugim elementem swojego rodzica licząc od końca
:nth-last-of-type(n)p:nth-last-of-type(2)Wybiera każdy element <p>, który jest ostatnim elementem tego typu u swojego rodzica, licząc od końca
:nth-of-type(n)p:nth-of-type(2)Wybiera każdy element <p>, który jest drugim elementem tego typu u swojego rodzica
:only-of-typep:only-of-typeWybiera każdy element <p>, który jest jedynym elementem tego typu u swojego rodzica
:only-childp:only-childWybiera każdy element <p>, który jest jedynym dzieckiem swojego rodzica
:optionalinput:optionalSelektor wybiera elementy input, które nie zawierają atrybutu "required"
:out-of-rangeinput:out-of-rangeWybiera wszystkie elementy input, których wartość wykracza poza określony zakres
::placeholderinput::placeholderWybiera wszystkie elementy input, które zawierają atrybut "placeholder"
:read-onlyinput:read-onlyWybiera wszystkie elementy input z atrybutem "readonly"
:read-writeinput:read-writeWybiera wszystkie elementy input bez atrybutu "readonly"
:requiredinput:requiredWybiera wszystkie elementy input z atrybutem "required"
:root:rootWybeira element root dokumentu
::selection::selectionWybiera część elementu, która jest zaznaczona przez użytkownika
:target#news:target Wybiera aktywny element #news (po kliknięciu w URL z anchorem zawierającym taki anchor)
:validinput:validWybiera wszystkie elementy input z prawidłową wartością
:visiteda:visitedSelektor wybiera wszystkie odwiedzone linki
źródło: https://www.w3schools.com/cssref/css_selectors.asp