CSS: pseudo-class selector (:)
Match Links
tag:link-
Match a link.
tag is optional. It can be a simple selector (selecting by tag name, id, class etc) or a compound selector (combination of tag name, id, class etc). If empty, it 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: first child, last child, only child selectors
: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: :not negation selector
- CSS: :is any of selector
: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
Selector types
Simple selectors
- CSS: type selector (tag name)
- CSS: universal selector (* any tag)
- CSS: class selector (.x)
- CSS: ID selector (#)
- CSS: attribute selector ([x])
Combinators
- CSS: descendant selector (space)
- CSS: child selector (>)
- CSS: adjacent sibling selector (+)
- CSS: subsequent sibling selector (~)
Selector list
Nesting syntax
Special selector
- CSS: :root selector
- CSS: no child selector
- CSS: first child, last child, only child selectors
- CSS: nth-child selector
- CSS: nth-child arg of selector
- CSS: nth-of-type selector
- CSS: pseudo-class selector (:)
- CSS: pseudo-element selector (::)
- CSS: :not negation selector
- CSS: :has descendant selector