CSS: Pseudo Class
What is Pseudo-Class
Pseudo-Class means the state of an element, such as in focus, mouse hovering it, clicked, checkbox checked, empty content, language spec, first child, etc.
it is like having a HTML: Class Attribute but not exactly.
CSS: Pseudo-Class Selectors lets you select them based on the element's state.
Pseudo-Class Syntax
tagName:pseudoClassName
They match HTML or XML elements in some particular way, by criterion of nesting structure relationship with other elements, or user interface state, or other misc criterion.
Example of Pseudo-Class
/* pseudo-class CSS selectors, to color links */ a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { background-color: pink; }
Complete List of Pseudo-Class
:active
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited