Minden gyakori CSS-szelektor, családonként csoportosítva: alapok, kombinátorok, pszeudo-osztályok, pszeudo-elemek és attribútumszelektorok. Minden sor a szelektort egy egysoros példával párosítja.
A szelektor választja ki az elemeket, amelyekre egy szabály vonatkozik. Ha több szabály is illeszkedik, a specificitás dönt: az inline erősebb, mint az id, az id erősebb, mint a class, a class erősebb, mint a típus. A szelektorokat jobbról balra olvasd: a böngésző először a legjobbra eső résszel egyezik, majd felfelé halad a kombinátorokon. Az alábbi családok szinte mindent lefednek, amit meg fogsz írni.
Referenciatáblázat · 53 bejegyzés
CSS-szelektorokExplained
53 of 53 rows
Alapok
Az adott tag összes eleme.
button { }
Az adott osztályú elemek.
.active { }
Az egyetlen elem az adott azonosítóval.
#header { }
Minden elem.
* { box-sizing: border-box; }
A dokumentum gyökéreleme; a globális egyéni tulajdonságok szokásos helye.
:root { --gap: 1rem; }
Az A vagy a B által illesztett elemek (csoportosítás).
h1, h2, h3 { }
Kombinátorok
Bármely B, amely A leszármazottja.
nav a { }
B, amely A közvetlen gyermeke.
ul > li { }
B, amely közvetlenül A után következik, azonos szülővel.
h1 + p { }
Minden B, amely A után következik, azonos szülővel.
h1 ~ p { }
Pszeudo-osztályok (állapot)
Az elem, miközben a mutató fölötte van.
a:hover { }
Az elem, amely billentyűzet-fókuszt kapott.
input:focus { }
Egy elem, amely a szülője első gyermeke.
li:first-child { }
Az n-edik gyermek; képleteket is elfogad, mint a 2n.
tr:nth-child(2n) { }
Olyan elemek, amelyek a belső szelektorok egyikére sem illeszkednek; a Selectors 4 óta listát is kaphat.
li:not(:first-child, .skip) { }
Bejelölt jelölőnégyzet, választógomb vagy opció.
input:checked { }
Letiltott beviteli mező vagy gomb.
button:disabled { }
Szülő, amely tartalmaz a belső szelektorra illeszkedő elemet.
li:has(ul) { }
A listában szereplő bármely szelektor; a specificitása a listában szereplő legmagasabb.
:is(ol, ul) li { }
Ugyanaz, mint az :is(), de nulla specificitással.
:where(ol, ul) li { }
Olyan fókusz, amelynek gyűrűt kellene megjelenítenie, általában billentyűzetről.
a:focus-visible { }
Elem, amely önmagán vagy egy leszármazottján van fókusz.
form:focus-within { }
Egy elem, amely a szülője utolsó gyermeke.
li:last-child { }
Elem testvérek nélkül.
p:only-child { }
Az azonos tagű n-edik testvér; képleteket is elfogad, mint a 2n.
p:nth-of-type(2n) { }
Az azonos tagű első vagy utolsó testvér.
p:first-of-type { }
Elem gyerekek és szöveg nélkül.
td:empty { }
Még nem látogatott és már meglátogatott hivatkozások.
a:visited { }
Kötelezőnek jelölt és opcionálisan hagyott beviteli mezők.
input:required { }
Olyan beviteli mezők, amelyek értéke megfelel vagy nem felel meg az érvényesítési szabályoknak.
input:invalid { }
Beviteli mező, amelyet a felhasználó nem szerkeszthet.
input:read-only { }
Az elem, amelynek azonosítója egyezik az URL fragmentjával.
#note:target { }
A csoport előre kiválasztott opciója vagy alapértelmezett gombja.
input:default { }
Szkript által köztes állapotba állított jelölőnégyzet.
input:indeterminate { }
Bármely beépített elem, vagy egy egyéni elem, amint regisztrálták.
my-widget:defined { }
Elem a megadott nyelven.
p:lang(fr) { }
Pszeudo-elemek
Generált tartalom-csomópont az elem előtt.
label::before { content: ""; }
Generált tartalom-csomópont az elem után.
code::after { content: ";"; }
Egy szövegblokk első betűje.
p::first-letter { }
Egy beviteli mező helyőrző szövege.
input::placeholder { }
Egy szövegblokk első sora.
p::first-line { }
A szöveg, amelyet a felhasználó kijelölt.
::selection { }
A listaelem felsorolásjele vagy száma.
li::marker { }
A teljes képernyős elem vagy párbeszédablak mögötti terület.
dialog::backdrop { }
A fájlbeviteli mezőben lévő tallózás gomb.
input::file-selector-button { }
Egy árnyék-DOM rész, amelyet a gazdaelem közzétett.
my-widget::part(header) { }
Attribútumszelektorok
Olyan elemek, amelyeken megvan az attribútum, bármilyen értékkel.
[required] { }
Az attribútum pontosan egyezik a val értékkel.
[type="submit"] { }
Az attribútum a val értékkel kezdődik.
a[href^="https"] { }
Az attribútum val értékre végződik.
a[href$=".pdf"] { }
Az attribútum tartalmazza a val értéket.
a[href*="login"] { }
Szóközzel elválasztott lista, amely tartalmazza a val értéket.
[class~="badge"] { }
Az érték egyenlő a val értékkel, vagy a val értékkel és kötőjellel kezdődik.