CSS selectors reference

Attribute selectors

Target items with a specific attribute

details[open] {
    background-color: green;
}

Target items whose attribute is set to something specific

a[href="https://google.com"] {
    display: none;
}

input[type="text"] {
    background-color: black;
    color: white
}

Target items whose set attribute has a specific...

...beginning

a[href^="gemini://"] {
    background-color: green;
}

...ending

a[href$=".html"] {
    background-color: red;
}

...whole word contained within

[class~="orange"] {
    background-color: orange;
}

...string contained within

a[href*="cgi-bin"] {
    background-color: blue;
}

Pseudo-classes

Pseudo-class	What it do	Example
:has()	Matches an element with a specific element inside it, or followed by a specific element	article:has(aside) h2:has(+ p)
:not()	Matches all elements not specified	p:not(.intro)
:checked	Matches an input element that is checked only	input:checked
:first-child	Matches the element that is the first child of its parent	li:first-child
:first-of-type	Matches the element that is the first child of its parent of its type	p:first-of-type
:nth-child()	Matches the element that is the nth child of its parent	li:nth-child(2)
:nth-of-type()	Matches the element that is the nth child of its parent of its type	img:nth-of-type(4)
:last-child	Matches the element that is the last child of its parent	li:last-child
:last-of-type	Matches the element that is the last child of its parent of its type	article:last-of-type
:nth-last-child()	Matches the element that is the nth-from-last child of its parent	li:nth-last-child(2)
:nth-last-of-type()	Matches the element that is the nth-from-last child of its parent of its type	ul:nth-last-of-type(7)
:only-child	Matches an element that is the only child of its parent	p:only-child
:only-of-type	Matches an element that is the only child of its parent of its type	p:only-of-type
:target	Something I should look into using on my bilingual fic pages instead of :checked (Edit: Looked into it, it’s not great when I want one particular option to display by default)	div:target