CSS: pseudo-class selector (:)
Match Links
tag:link-
Match a link.
tag here is compound selector, or none, which means the universal selector (* any tag).
tag:visited-
Match visited link.
/* make link to have underline only when mouse hovers over it */ a:visited, a:link { text-decoration: none; } a:hover { text-decoration: underline; }
Match User Action
tag:hover-
mouse hover over a element tag
tag:active-
Match a link that's clicked on but mouse button not yet released.
tag:focus-
when a element is in focus (receive keys, etc. Click on a element to put focus to it.)
Match Target
tag:target-
Match tag that has a
idattribute value same as the current URL#fragment.
User Interface Pseudo-Class
tag:enabled-
Match a user interface tag that is enabled.
tag:disabled-
Match a user interface tag that is disabled
tag:checked-
Match a user interface tag which is checked (e.g. radio-button, checkbox)
Match Language
tag:lang(v)-
Match tag if its value of
langattribute is v./* make Chinese paragraphs red. */ p:lang(zh) { color: red; }
Other
:root→ CSS: :root selector:empty→ CSS: no child selector
- CSS: sibling rank selector (first, last, nth)
:only-child:first-child:last-child:nth-child():nth-last-child():first-of-type:last-of-type:nth-last-of-type():nth-of-type():only-of-type
:not()→ CSS: negation selector (:not)
- CSS: is any of selector (:is, :where)
:is:where
:any:any-link:default:defined:dir():first:fullscreen:focus-visible:host:host():host-context():indeterminate:in-range:invalid:left:optional:out-of-range:read-only:read-write:required:right:scope:valid
CSS, pseudo-element and pseudo-class
CSS, Selectors
simple selectors
- CSS: element selector (tag name)
- CSS: universal selector (* any tag)
- CSS: class selector
- CSS: ID selector
- CSS: attribute selector
- CSS: multiple attributes selector
selector list
relationship selectors (combinators)
- CSS: descendant selector (space)
- CSS: child selector (>)
- CSS: subsequent sibling selector (~)
- CSS: adjacent sibling selector (+)
special selector
- CSS: :root selector
- CSS: no child selector
- CSS: sibling rank selector (first, last, nth)
- CSS: nth-child selector
- CSS: pseudo-class selector (:)
- CSS: pseudo-element selector (::)
- CSS: negation selector (:not)
- CSS: is any of selector (:is, :where)
- CSS: :has descendant selector