Alla vanliga CSS-selektorer, grupperade efter familj: grundläggande, kombinatorer, pseudoklasser, pseudoelement och attributselektorer. Varje rad parar selektorn med ett exempel på en rad.
En selektor väljer de element en regel gäller för. Specificitet avgör vilken regel som vinner när flera matchar: inline slår id, id slår klass, klass slår typ. Läs selektorer från höger till vänster: webbläsaren matchar först delen längst till höger och går sedan uppåt längs kombinatorerna. Familjerna nedan täcker nästan allt du kommer att skriva.
Referenstabell · 53 poster
CSS-selektorerExplained
53 of 53 rows
Grundläggande
Alla element med den taggen.
button { }
Element med den klassen.
.active { }
Det enda elementet med det id:t.
#header { }
Alla element.
* { box-sizing: border-box; }
Dokumentroten; det vanliga stället för globala egna egenskaper.
:root { --gap: 1rem; }
Element som matchas av A eller B (gruppering).
h1, h2, h3 { }
Kombinatorer
Alla B som härstammar från A.
nav a { }
B som är ett direkt barn till A.
ul > li { }
B omedelbart efter A, samma förälder.
h1 + p { }
Alla B som kommer efter A, samma förälder.
h1 ~ p { }
Pseudoklasser (tillstånd)
Elementet medan pekaren är över det.
a:hover { }
Elementet som har tangentbordsfokus.
input:focus { }
Ett element som är det första barnet till sin förälder.
li:first-child { }
Det n:te barnet; tar formler som 2n.
tr:nth-child(2n) { }
Element som inte matchar någon inre selektor; tar en lista sedan Selectors 4.
li:not(:first-child, .skip) { }
En ikryssad kryssruta, radioknapp eller alternativ.
input:checked { }
Ett inaktiverat inmatningsfält eller en inaktiverad knapp.
button:disabled { }
En förälder som innehåller en matchning för den inre selektorn.
li:has(ul) { }
Alla selektorer i listan; specificiteten är den högsta i listan.
:is(ol, ul) li { }
Samma som :is(), men med specificiteten noll.
:where(ol, ul) li { }
Fokus som bör visa en ring, vanligtvis från tangentbordet.
a:focus-visible { }
Ett element som självt eller vars avkomma har fokus.
form:focus-within { }
Ett element som är det sista barnet till sin förälder.
li:last-child { }
Ett element utan syskon.
p:only-child { }
Det n:te syskonet med samma tagg; tar formler som 2n.
p:nth-of-type(2n) { }
Det första eller sista syskonet med samma tagg.
p:first-of-type { }
Ett element utan barn och utan text.
td:empty { }
Obesökta länkar och redan besökta länkar.
a:visited { }
Fält markerade som obligatoriska och fält som lämnas valfria.
input:required { }
Fält vars värde godkänns eller underkänns av valideringsreglerna.
input:invalid { }
Ett fält som användaren inte kan redigera.
input:read-only { }
Elementet vars id matchar URL-fragmentet.
#note:target { }
Det förvalda alternativet eller standardknappen i en grupp.
input:default { }
En kryssruta som satts i ett obestämt tillstånd av ett skript.
input:indeterminate { }
Alla inbyggda element, eller ett anpassat element när det har registrerats.
my-widget:defined { }
Ett element på det angivna språket.
p:lang(fr) { }
Pseudoelement
En genererad innehållsnod före elementet.
label::before { content: ""; }
En genererad innehållsnod efter elementet.
code::after { content: ";"; }
Den första bokstaven i ett textblock.
p::first-letter { }
Platshållartexten i ett fält.
input::placeholder { }
Den första raden i ett textblock.
p::first-line { }
Texten användaren har markerat.
::selection { }
Punkten eller numret på ett listobjekt.
li::marker { }
Området bakom ett helskärmselement eller en dialog.
dialog::backdrop { }
Bläddra-knappen inuti ett filfält.
input::file-selector-button { }
En shadow-DOM-del som värden har exponerat.
my-widget::part(header) { }
Attributselektorer
Element som har attributet, med valfritt värde.
[required] { }
Attributet är exakt lika med val.
[type="submit"] { }
Attributet börjar med val.
a[href^="https"] { }
Attributet slutar med val.
a[href$=".pdf"] { }
Attributet innehåller val.
a[href*="login"] { }
En blankstegsseparerad lista som innehåller val.
[class~="badge"] { }
Värdet är lika med val eller börjar med val följt av ett bindestreck.