CSS-selectors cheat sheet: live tester, nth-child, ::before | We.Inc
Typ een willekeurige CSS-selector en zie welke elementen hij selecteert op een voorbeeldpagina, met de specificiteit. Met elke groep selectors, een calculator voor nth-child-formules, recepten voor ::before en ::after en :has().
Selectors vertellen CSS op welke elementen een regel van toepassing is. De belangrijkste zijn type (p), class (.card), ID (#main), attribuut ([type=email]), combinators (afstammeling met spatie, kind >, broer of zus + en ~), pseudo-classes zoals :hover en :nth-child(2n), en pseudo-elementen zoals ::before. Typ hieronder een selector om te zien wat hij selecteert.
De selectors achter de meeste stylesheets
Selector
Selecteert
Specificiteit
Elk p-element
.card
Elementen met class card
Het element met id main
nav a
a ergens binnen nav
ul > li
li die directe kinderen van ul zijn
a:hover
Een link onder de muisaanwijzer
Een selectortabel lezen brengt u maar zo ver. De tester hieronder laat uw selector door de eigen engine van de browser lopen op een kleine voorbeeldpagina, markeert elk element dat hij selecteert, legt ongeldige invoer uit en berekent de specificiteit. De calculator daaronder beantwoordt de eeuwige vraag welke items 3n+1 nu eigenlijk kiest.
Typ een selector in de tester, of klik op een van de voorbeelden om die te laden.
Geselecteerde elementen op de voorbeeldpagina lichten op, en het aantal wordt bijgewerkt terwijl u typt.
Lees de specificiteitsscore als drie getallen: ID's, dan classes en vergelijkbare, dan elementtypes.
Gebruik de nth-child-calculator om elke An+B-formule te testen op een lijst van maximaal 30 items.
Style met classes in plaats van ID's. Een class houdt de specificiteit laag, zodat latere regels en utility classes hem nog kunnen overschrijven.
Gebruik :focus-visible in plaats van :focus voor focusringen. Het toont de ring voor toetsenbordgebruikers zonder dat hij bij elke muisklik oplicht.
::before en ::after hebben een content-eigenschap nodig, ook al is het een lege string, anders worden ze helemaal niet gegenereerd.
Wikkel lange selectorlijsten in :is() om ze in te korten, of in :where() als ze geen specificiteit mogen meedragen.
Veelgestelde vragen
Wat is het verschil tussen nth-child en nth-of-type?
:nth-child(2) telt elk element op hetzelfde niveau en controleert dan of het tweede ook aan de rest van de selector voldoet. :nth-of-type(2) telt alleen elementen op hetzelfde niveau met dezelfde tag. Dus p:nth-child(2) selecteert niets als het tweede kind een h2 is, terwijl p:nth-of-type(2) toch de tweede alinea vindt.
Wat is het verschil tussen ::before en :before?
Het is hetzelfde pseudo-element. De dubbele dubbele punt werd ingevoerd om pseudo-elementen te onderscheiden van pseudo-classes, en browsers accepteren voor de vier oudere (before, after, first-line, first-letter) nog steeds de enkele dubbele punt, voor achterwaartse compatibiliteit. Schrijf in nieuwe code de dubbele dubbele punt.
Wat doet :has()?
:has() selecteert een element op basis van wat het bevat of wat erop volgt, bijvoorbeeld .card:has(img) stylet kaarten met een afbeelding, en label:has(+ input:invalid) stylet een label vóór een ongeldig veld. Het wordt ondersteund in alle huidige grote browsers, waarbij Firefox het eind 2023 als laatste toevoegde.
Hoe wordt specificiteit berekend?
Tel drie dingen: ID-selectors; classes, attribuutselectors en pseudo-classes; dan typeselectors en pseudo-elementen. Vergelijk van links af, dus één ID wint van elk aantal classes. :where() voegt niets toe, terwijl :is(), :not() en :has() de score van hun meest specifieke argument krijgen. Inline styles en !important staan boven al deze.
Waarom zie ik mijn :hover-stijl niet op telefoons?
Touchscreens hebben geen hovertoestand, dus browsers slaan die over of passen hem kort toe na een tik. Wikkel styling die alleen voor hover is in @media (hover: hover) en zorg dat alles wat bij hover verschijnt ook met een tik en het toetsenbord bereikbaar is.
Hoe de browser een selector leest
Browsers matchen selectors van rechts naar links. Voor nav ul li a begint de engine bij elke link op de pagina en loopt dan omhoog om te controleren of er een li, een ul en een nav zijn. Daarom is het meest rechtse deel, de key selector, het belangrijkst voor snelheid, al is de snelheid van selectors op gewone pagina's zelden een echt probleem.
Een komma maakt een selectorlijst, wat gewoon meerdere selectors zijn die één regel delen. Als er één ongeldig is, vervalt de hele regel, behalve binnen :is() en :where(), die ongeldige items vergeven.
Pseudo-classes tegenover pseudo-elementen
Een pseudo-class, geschreven met één dubbele punt, selecteert een bestaand element in een bepaalde toestand of positie: :hover, :checked, :first-child, :empty. Een pseudo-element, geschreven met twee dubbele punten, maakt of selecteert een deel dat in de HTML geen eigen element is: ::before, ::placeholder, ::selection, ::marker.
Per samengestelde selector is maar één pseudo-element toegestaan, en dat moet als laatste komen. Content die via ::before en ::after is toegevoegd wordt meestal voorgelezen door schermlezers, maar kan niet geselecteerd of gekopieerd worden, dus zet daar geen essentiële informatie in.
Specificiteit onder controle houden
De meeste specificiteitsgevechten beginnen wanneer een ID of een lange keten van geneste selectors wint van een latere, eenvoudigere regel. Platte classnamen, hooguit één of twee niveaus diep, houden elke regel makkelijk te overschrijven.
Cascade layers (@layer) bieden nog een middel: regels in een latere laag winnen van regels in een eerdere laag, ongeacht de specificiteit. Resets en styles van derden kunnen in een lage laag staan, zodat uw eigen classes altijd winnen.
Basis- en attribuutselectors
Eenvoudige selectors
Selector
Voorbeeld
Selecteert
Elk element
Type
Alle button-elementen
Class
.price
class bevat price
ID
id is checkout
Attribuut aanwezig
[disabled]
Heeft het attribuut überhaupt
Exacte waarde
[type="email"]
Waarde is precies email
Begint met
[href^="https"]
Waarde begint met https
Eindigt op
[href$=".pdf"]
Waarde eindigt op .pdf
Bevat
[class*="btn"]
Waarde bevat ergens btn
Woord in lijst
[rel~="noopener"]
Lijst met spaties bevat het woord
Taalvoorvoegsel
[lang|="en"]
en of en- gevolgd door iets
Hoofdletterongevoelig
[href$=".PDF" i]
Selecteert .pdf, .PDF enzovoort
Combinators
Relaties tussen elementen
Combinator
Voorbeeld
Selecteert
Afstammeling (spatie)
nav a
a op elke diepte binnen nav
Kind >
ul > li
li direct binnen ul
Volgende broer of zus +
De p direct na een h2
Latere broers en zussen ~
Elke p na een h2 met dezelfde ouder
Selectorlijst ,
Een van beide
Pseudo-classes
Toestand, structuur en logica
Pseudo-class
Selecteert
:hover
Onder een muisaanwijzer
:focus
Heeft focus via toetsenbord of code
:focus-visible
Heeft focus en de browser vindt dat er een ring moet verschijnen
:focus-within
Het element zelf of een afstammeling heeft focus
:active
Wordt ingedrukt
:visited
Een al bezochte link (beperkte styling vanwege privacy)
:checked / :disabled / :required
Formulierelementen in die toestand
:valid / :invalid / :user-invalid
Validatietoestanden van formulieren; user-invalid wacht op interactie
:placeholder-shown
Een invoerveld dat op dat moment zijn placeholder toont
:first-child / :last-child / :only-child
Positie tussen broers en zussen
:nth-child(An+B) / :nth-last-child()
Positie volgens formule, met alle broers en zussen meegeteld
:nth-of-type() / :first-of-type
Positie waarbij alleen dezelfde tag meetelt
:empty
Geen kinderen en geen tekst
:not(x)
Komt niet overeen met x
:is(x, y) / :where(x, y)
Komt overeen met een item uit de lijst; where heeft specificiteit nul
:has(x)
Bevat iets dat overeenkomt met x, of wordt erdoor gevolgd
:root
Het html-element
:target
Het element waarvan de id in de hash van de URL staat
Pseudo-elementen en recepten voor ::before / ::after
Delen van een element
Pseudo-element
Selecteert
::before / ::after
Gegenereerde content vóór of na de content van het element
::first-letter / ::first-line
Eerste letter of eerste weergegeven regel van een blok
::placeholder
Placeholdertekst in een invoerveld
::selection
Tekst die de gebruiker heeft gemarkeerd
::marker
Het opsommingsteken of nummer van een lijstitem
::file-selector-button
De knop van een bestandsinvoer
::backdrop
De laag achter een modale dialog of een element op volledig scherm
Verplicht-sterretje, icoon voor externe links en een aanhalingsteken
Elke decoratie staat in de CSS, zodat de HTML schoon blijft. content is voor beide pseudo-elementen verplicht.
:hover, :focus-visible en :has() samen
Tab naar het veld om de ring te zien. De kaart wordt alleen rood zolang er een ongeldig e-mailadres in staat.
Home
Partnersite
Menu
Seizoensgerechten, wekelijks gewisseld.
Vraag naar allergenen.
Soep
Salade
Risotto
Taart
Koffie
Naam
Opmerking
Selectortester
Selector
Voorbeeldselectors
Dat is geen geldige selector in deze browser.
{n} element geselecteerd
{n} elementen geselecteerd
Specificiteit leest ID's, classes, types. Het derde item, Risotto, heeft class featured; de eerste alinea heeft id intro.
nth-child-calculator
Formule binnen :nth-child( )
Aantal items: {n}
Voorbeeldformules
Gebruik een vorm zoals 2n+1, -n+3, odd, even of een enkel getal.