Všechny běžné selektory CSS, seskupené podle rodiny: základní, kombinátory, pseudotřídy, pseudoelementy a selektory atributů. Každý řádek spojuje selektor s jednořádkovým příkladem.
Selektor vybírá prvky, na které se pravidlo vztahuje. Specificita rozhoduje, které pravidlo vyhraje, když jich odpovídá několik: inline porazí id, id porazí třídu, třída porazí typ. Čtěte selektory zprava doleva: prohlížeč nejprve porovná nejpravější část a pak stoupá po kombinátorech. Rodiny níže pokrývají téměř vše, co napíšete.
Referenční tabulka · 53 položek
Selektory CSSExplained
53 of 53 rows
Základní
Každý prvek daného tagu.
button { }
Prvky s danou třídou.
.active { }
Jediný prvek s daným id.
#header { }
Každý prvek.
* { box-sizing: border-box; }
Kořen dokumentu; obvyklé místo pro globální vlastní vlastnosti.
:root { --gap: 1rem; }
Prvky odpovídající A nebo B (seskupení).
h1, h2, h3 { }
Kombinátory
Jakýkoli B, který je potomkem A.
nav a { }
B, které je přímým potomkem A.
ul > li { }
B bezprostředně za A, se stejným rodičem.
h1 + p { }
Každé B, které následuje za A, se stejným rodičem.
h1 ~ p { }
Pseudotřídy (stav)
Prvek, pokud je nad ním kurzor.
a:hover { }
Prvek, který má klávesnicový fokus.
input:focus { }
Prvek, který je prvním potomkem svého rodiče.
li:first-child { }
n-tý potomek; přijímá vzorce jako 2n.
tr:nth-child(2n) { }
Prvky, které neodpovídají žádnému vnitřnímu selektoru; od Selectors 4 přijímá seznam.
li:not(:first-child, .skip) { }
Zaškrtnutý checkbox, přepínač nebo volba.
input:checked { }
Zakázané vstupní pole nebo tlačítko.
button:disabled { }
Rodič, který obsahuje shodu s vnitřním selektorem.
li:has(ul) { }
Libovolný selektor ze seznamu; specificita je nejvyšší v seznamu.
:is(ol, ul) li { }
Stejné jako :is(), ale s nulovou specificitou.
:where(ol, ul) li { }
Fokus, který by měl zobrazit obrys, obvykle z klávesnice.
a:focus-visible { }
Prvek, který má fokus sám, nebo jeden z jeho potomků.
form:focus-within { }
Prvek, který je posledním potomkem svého rodiče.
li:last-child { }
Prvek bez sourozenců.
p:only-child { }
n-tý sourozenec stejného tagu; přijímá vzorce jako 2n.
p:nth-of-type(2n) { }
První nebo poslední sourozenec stejného tagu.
p:first-of-type { }
Prvek bez potomků a bez textu.
td:empty { }
Nenavštívené a již navštívené odkazy.
a:visited { }
Pole označená jako povinná a pole ponechaná volitelná.
input:required { }
Pole, jejichž hodnota projde nebo neprojde validačními pravidly.
input:invalid { }
Pole, které uživatel nemůže upravit.
input:read-only { }
Prvek, jehož id odpovídá fragmentu URL.
#note:target { }
Předvybraná volba nebo výchozí tlačítko skupiny.
input:default { }
Checkbox nastavený skriptem do neurčitého stavu.
input:indeterminate { }
Libovolný vestavěný prvek nebo vlastní prvek od chvíle registrace.
my-widget:defined { }
Prvek v daném jazyce.
p:lang(fr) { }
Pseudoelementy
Vytvořený uzel obsahu před prvkem.
label::before { content: ""; }
Vytvořený uzel obsahu za prvkem.
code::after { content: ";"; }
První písmeno bloku textu.
p::first-letter { }
Zástupný text vstupního pole.
input::placeholder { }
První řádek bloku textu.
p::first-line { }
Text, který uživatel zvýraznil.
::selection { }
Odrážka nebo číslo položky seznamu.
li::marker { }
Oblast za celoobrazovkovým prvkem nebo dialogem.
dialog::backdrop { }
Tlačítko procházení uvnitř pole pro soubor.
input::file-selector-button { }
Část shadow DOM, kterou hostitel vystavil.
my-widget::part(header) { }
Selektory atributů
Prvky, které mají daný atribut, s libovolnou hodnotou.
[required] { }
Atribut se přesně rovná val.
[type="submit"] { }
Atribut začíná na val.
a[href^="https"] { }
Atribut končí na val.
a[href$=".pdf"] { }
Atribut obsahuje val.
a[href*="login"] { }
Seznam oddělený mezerami, který zahrnuje val.
[class~="badge"] { }
Hodnota se rovná val nebo začíná na val plus spojovník.