Pseudo-class selectors = “phantom classes”
Format: :<word-or-phrase-here>
<div><span id="bob"><p>Text</p></span></div>#bob:first-child = “first child of another element when the child’s id is #bob”
<span> tag#bob > :first-child = “first child when the parent element is #bob”
<p> taga:link:hover === a:hover:link:root
<html> in HTML, varies in XML:empty
<img>, <hr>, <br>, <input>):only-child
:only-of-type
:only-of-child but for the anchor element:first-child, :last-child
:only-child === :first-child:last-child:first-of-type, :last-of-type
td:first-of-type would ignore <th> tags:only-of-type === :first-of-type:last-of-type:nth-child(<arg>), :nth-last-child(<arg>)
arg:
<number> Single child based on the index
<An(+-B)>
A = Stepn = Current count (1,2,3,4,…), Starts at 0
+B or -B = Start counting at this offset
+B = Begin at index 0 + B-B = Begin at <last-list-index> - B3n+1:
[0,3,6,9,12,..] normally+1 = start at index 1[1,4,7,10,13, ..]even, odd = 2n (event), 2n+1 (odd)<An(+-B) of <selector>>
of <some-selector>li:nth-child(-n + 3 of .noted) = start at <li> with class .noted 3, subtract by 1 each time, style all found
li elements with class .notedli.noted:nth-child(-n + 3) = start at <li> 3, subtract by 1 each time, style only when .class=.noted`
li as pseudo-classes only consider the anchor elementBased on ephemeral conditions that can’t be predicted.
Hyperlink-specific (<a> tags with href attribute)
:link - link that has not been visited
:visited will be inherited from :link (e.g., font-size :link will apply to visited links too, but not color):visited - link that has been visited (opposite of :link)
:visited is apparently part of the W3 accessibility, though.:any-link - Any link (regardless of visited or not):local-link - Link within the document (i.e., #id selector)
Nonhyperlink-specific
:target = element who’s id attribute equals the URL fragment:target-within = element or a descendant element who’s id attribute equals the URL fragment
<div><p id="foo">etc</p></div> and div:target-within will match the div if the url has /my-url#foo (foo as the fragment):scope refers to an already-referenced element as a point for selector matching in JavaScript
document.querySelectorAll('#output').querySelectorAll(':scope > div'):root by default@scope’s defined scope root (only real use so far in CSS)
@scope is not widely supported (Firefox has no support w/o a flag):hoveractive = activated by user input (e.g., <a> when a user clicks but hasn’t released yet):focus:focus-within = element or descendant is focused:focus-visible = user agent determines if the user needs to be informed it’s focused
:focus does:enabled, :disabled = disabled attr (or set via JavaScript):checked (radios/checkboxes):indeterminate (radios/checkboxes when they have not been checked/unchecked yet)
.indeterminate = true in JavaScript:default
<input type="checkbox" checked /><button type="submit"> within a form<select> and the item with selected attr:autofill = when browser autofills forms
!important, preventing these from being overridden:placeholder-shown:valid, :invalid = validity of an input, e.g.:
:in-range, out-of-range:required, :optional = required attr on html element (or not)read-write = nondisabled, non-read-only, or contenteditableread-only = oppositelang(<language>)
| basically matches `[lang | =”fr”] |
<html lang="fr"> or HTTP headers returned, whereas attribute selector does notdir(<dir>) = style based on dir html attr (rtl or ltr):not(<comma-list-of-selectors>)
:is(<comma-list-of-selectors>), :where(<comma-list-of-selectors>)
:is takes specificity of the most specific selector:where specificity = 0:defined = If custom element has been defined yet (customElements.define(..)):has(<comma-list-of-selectors>)
div:has(.popup) will constantly check all divs for this class, which can be expensiveInserts fictional elements into the document.
Format: ::<word-or-phrase-here>
::first-letter = first character only
::first-line = first line when text spans multiple lines
<em>::placeholder = style placeholder attr::file-selector-button = style the button created from <input type="button">::before, ::after = add content before/after an element (content: "something"; css property)::selection
::target-text = style text that is within url fragment
/some/url#:~:text=<text-to-highlight>::spelling-error, ::grammar-error (limited support in 2023)::backdrop = show something under the current layer with the size of the viewport
<dialog open does not show it. Doing dialog.showModal() will.::cue = styles captions of media basicallyhost = select element hosing shadow domhost(<additional-selector) = same but with more filtering (e.g., select an attr):host-context(<ancestor-selector>) = use inside shadow dom, select condition outside of shadow dom and style the element within::slotted(<selector.) = style slots based on selectors###