| Mouse over selector | Triggered when the user hovers over an element with the cursor. You can use the hover selection to target an element that a user hovers over with their cursor. |
a:hover {} |
|---|
| Active Link Selector | The :active pseudo-class is commonly used on <a> and <button> elements. When a link is clicked, you can provide a style for it with this selector. |
a:active {} |
|---|
| Focus Selector | Triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key. |
input:focus {} |
|---|
| Visited Links Selector | Represents that the link has already been visited. Its styles for URLs that the user has already visited are defined. |
:visited {} |
|---|
| Link Selector | This represents that the link has not yet been visited. |
.class:link {} |
|---|
| Checked selector element | Represents radio, checkbox, or option element that is checked or toggled to an on-state. When the page loads, it specifies that an <input> element should be already selected (checked). |
input:checked {} |
|---|
| Disabled elements selector | An element is disabled. It represents that the element is currently disabled, To pick the disabled element, the :disabled selector is used. |
input:disabled {} |
|---|
| Enabled elements selector | An element is enabled. It represents that the element is currently available. |
input:enabled {} |
|---|
| Not a Specified Element Selector | Represents elements that do not match a list of selectors. |
:not(p) {} |
|---|
| First Line Selector | Applies styles to the first line of a block-level element. It is used in the first line of an element to style it. |
p::first-line {} |
|---|
| First Letter Selector | Applies styles to the first letter of the first line. The style is applied to the first letter of the first line of a block-level element if it is not preceded by other content. |
::first-letter {} |
|---|
| First Child Selector | Represents the first element among a group of sibling elements. It is used to find all elements that are children of a given element. |
:first-child {} |
|---|
| Last Child Selector | Represents the last. It indicates the last sibling element in a collection of siblings. |
:last-child {} |
|---|
| Only Child Selector | Represents an element without any siblings. You can use the CSS:only-child selector to target an element which is the only child of its parent. |
:only-child {} |
|---|
| :nth-child Selector | Matches elements based on their position. |
:nth-child() |
|---|
| First Element of its Parent Selector | Represents the first element. In CSS, you may use the:first-of-type selector to target an element's first appearance within the container. |
P:first-of-type {} |
|---|
| Elements that have no Children Selector | Represents any element that has no children. Any element with no children is represented by this. Either element nodes or text can be children. |
p:empty {} |
|---|
| Before Element | Used to add cosmetic content to an element with the content property.The::before pseudo-element is used to define created stuff that comes before the content of an element. |
class::before {} |
|---|
| After Element | Used to add cosmetic content to an element with the content propertyThe::after pseudo-element is used to define created stuff that comes after the content of an element. |
.class::after {} |
|---|
