CSS Selectors can be divide in 4 categories.
1. Simple selectors.
2. Attribute selectors.
3. Pseudo-classes and pseudo-elements.
4. Combinators.
In this article I'll discuss about Pseudo-classes and pseudo-elements.
Pseudo-classes
CSS Pseudo classes are used to specify special state of selected HTML elements. For example , the pseudo-class :hover can be used to select button when user hover over the button and this button can be styled.
button:hover {
color: blue;
}
There are lots of CSS Pseudo-classes are available. In this article I will try to cover some of the classes categories wise.
1. User action pseudo-classes
:hover
:active
:focus, :focus-within, and :focus-visible
:target
2. Location pseudo-classes
:link
:visited
User action pseudo-classes
:hover
This pseudo class is used to add special effect to element when mouse pointer is over it.
:active
This state is triggered when an element is actively interacted with. If we are using mouse as pointing device then this state is when click starts and hasn't been released.
:focus
This pseudo class is used to select element which is currently focused by the user.
:focus-within
This pseudo class is bit unusual. it selects an element if that element contains any children that have :focus.
:target
URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Location pseudo-classes
:link
The :link pseudo-class can be applied to any element that has a href value that hasn't been visited yet.
:visited
The :visited pseudo-class can be used to style link that's already visited by user.
pseudo-elements
We can style specified part of element by using pseudo-elements.
It can style the first letter, or line, of an element or can insert content before, or after, the content of an element.
selector::pseudo-element {
property: value;
}
::first-letter
This selector is used to add a style to the first letter of the specified selector.
::first-line
The ::first-line selector is used to add a style to the first line of the specified selector.
::after
The ::after selector inserts something after the content of each selected element(s).
::before
The ::before selector inserts something before the content of each selected element(s).
::marker
The ::marker selector selects the marker of a list item.
::selection
The ::selection selector matches the portion of an element that is selected by a user.