Alle vanlige CSS-selektorer, gruppert etter familie: grunnleggende, kombinatorer, pseudoklasser, pseudoelementer og attributtselektorer. Hver rad kobler selektoren til et eksempel på én linje.
En selektor velger elementene en regel gjelder for. Spesifisitet avgjør hvilken regel som vinner når flere treffer: inline slår id, id slår klasse, klasse slår type. Les selektorer fra høyre til venstre: nettleseren treffer først delen lengst til høyre og går deretter oppover langs kombinatoriene. Familiene nedenfor dekker nesten alt du kommer til å skrive.
Referansetabell · 53 oppføringer
CSS-selektorerExplained
53 of 53 rows
Grunnleggende
Alle elementer med den taggen.
button { }
Elementer med den klassen.
.active { }
Det ene elementet med den id-en.
#header { }
Alle elementer.
* { box-sizing: border-box; }
Dokumentroten; det vanlige stedet for globale egendefinerte egenskaper.
:root { --gap: 1rem; }
Elementer som treffer A eller B (gruppering).
h1, h2, h3 { }
Kombinatorer
Enhver B som er etterkommer av A.
nav a { }
B som er et direkte barn av A.
ul > li { }
B rett etter A, samme forelder.
h1 + p { }
Enhver B som kommer etter A, samme forelder.
h1 ~ p { }
Pseudoklasser (tilstand)
Elementet mens pekeren er over det.
a:hover { }
Elementet som har tastaturfokus.
input:focus { }
Et element som er det første barnet til forelderen.
li:first-child { }
Det n-te barnet; tar formler som 2n.
tr:nth-child(2n) { }
Elementer som ikke treffer noen indre selektor; tar en liste siden Selectors 4.
li:not(:first-child, .skip) { }
En avkrysset avkrysningsboks, radioknapp eller valgmulighet.
input:checked { }
Et deaktivert felt eller en deaktivert knapp.
button:disabled { }
En forelder som inneholder et treff på den indre selektoren.
li:has(ul) { }
Enhver selektor i listen; spesifisiteten er den høyeste i listen.
:is(ol, ul) li { }
Samme som :is(), men med spesifisitet null.
:where(ol, ul) li { }
Fokus som bør vise en ring, vanligvis fra tastaturet.
a:focus-visible { }
Et element som selv, eller som har en etterkommer, har fokus.
form:focus-within { }
Et element som er det siste barnet til forelderen.
li:last-child { }
Et element uten søsken.
p:only-child { }
Det n-te søskenet med samme tagg; tar formler som 2n.
p:nth-of-type(2n) { }
Det første eller siste søskenet med samme tagg.
p:first-of-type { }
Et element uten barn og uten tekst.
td:empty { }
Ikke besøkte lenker og allerede besøkte lenker.
a:visited { }
Felter merket som påkrevd og felt som er valgfrie.
input:required { }
Felter der verdien består eller mislykkes valideringsreglene.
input:invalid { }
Et felt brukeren ikke kan redigere.
input:read-only { }
Elementet der id-en samsvarer med URL-fragmentet.
#note:target { }
Det forhåndsvalgte alternativet eller standardknappen i en gruppe.
input:default { }
En avkrysningsboks satt i en ubestemt tilstand av et skript.
input:indeterminate { }
Ethvert innebygd element, eller et egendefinert element når det er registrert.
my-widget:defined { }
Et element i det oppgitte språket.
p:lang(fr) { }
Pseudoelementer
En generert innholdsnode før elementet.
label::before { content: ""; }
En generert innholdsnode etter elementet.
code::after { content: ";"; }
Den første bokstaven i en tekstblokk.
p::first-letter { }
Plassholderteksten i et felt.
input::placeholder { }
Den første linjen i en tekstblokk.
p::first-line { }
Teksten brukeren har markert.
::selection { }
Kulepunktet eller tallet på et listeelement.
li::marker { }
Området bak et fullskjermelement eller en dialog.
dialog::backdrop { }
Bla gjennom-knappen inne i et filfelt.
input::file-selector-button { }
En shadow-DOM-del som verten har eksponert.
my-widget::part(header) { }
Attributtselektorer
Elementer som har attributten, uansett verdi.
[required] { }
Attributten er nøyaktig lik val.
[type="submit"] { }
Attributten starter med val.
a[href^="https"] { }
Attributten slutter med val.
a[href$=".pdf"] { }
Attributten inneholder val.
a[href*="login"] { }
En mellomromseparert liste som inneholder val.
[class~="badge"] { }
Verdien er lik val eller starter med val etterfulgt av en bindestrek.