Hey there, today I picked the topic CSS Pseudo-elements and Pseudo-classes, You may ask why? it's because I was little bit confused with the pseudo-elements and pseudo-class. So I just want to make clear about this today and thought to share my learnings here.
Pseudo-elements and Pseudo-classes are some of the cool concepts of CSS. So learning it will surely help you when you want to design with CSS.
So what is Pseudo-element?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
And what are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Can you find the difference in syntax?
Notice the double colon notation - ::first-line versus :first-line
The single-colon notation for pseudo-classes and double-colon notation used for pseudo-elements in CSS3.
This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
Examples of CSS Pseudo Elements
| Selector | Example | Description |
| ::after | p::after |
Insert something after the content of each
``` ``` element |
| ::before | p::before |
Insert something before the content of each
``` ``` element |
| ::first-letter | p::first-letter |
Selects the first letter of each
``` ``` element |
| ::first-line | p::first-line |
Selects the first line of each
``` ``` element |
| ::marker | ::marker | Selects the markers of list items |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
Examples of CSS Pseudo Classes
| Selector | Example | Example description |
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked `````` element |
| :disabled | input:disabled | Selects every disabled `````` element |
| :empty | p:empty |
Selects every
``` ``` element that has no children |
| :enabled | input:enabled | Selects every enabled `````` element |
| :first-child | p:first-child |
Selects every
``` ``` elements that is the first child of its parent |
| :first-of-type | p:first-of-type |
Selects every
``` ``` element that is the first ``` ``` element of its parent |
| :focus | input:focus | Selects the `````` element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects `````` elements with a value within a specified range |
| :invalid | input:invalid | Selects all `````` elements with an invalid value |
| :lang(language) | p:lang(it) |
Selects every
``` ``` element with a lang attribute value starting with "it" |
| :last-child | p:last-child |
Selects every
``` ``` elements that is the last child of its parent |
| :last-of-type | p:last-of-type |
Selects every
``` ``` element that is the last ``` ``` element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) |
Selects every element that is not a
``` ``` element |
| :nth-child(n) | p:nth-child(2) |
Selects every
``` ``` element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) |
Selects every
``` ``` element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) |
Selects every
``` ``` element that is the second ``` ``` element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) |
Selects every
``` ``` element that is the second ``` ``` element of its parent |
| :only-of-type | p:only-of-type |
Selects every
``` ``` element that is the only ``` ``` element of its parent |
| :only-child | p:only-child |
Selects every
``` ``` element that is the only child of its parent |
| :optional | input:optional | Selects `````` elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects `````` elements with a value outside a specified range |
| :read-only | input:read-only | Selects `````` elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects `````` elements with no "readonly" attribute |
| :required | input:required | Selects `````` elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all `````` elements with a valid value |
| :visited | a:visited | Selects all visited links |
References
- https://www.w3schools.com/css/css_pseudo_elements.asp
- https://www.w3schools.com/css/css_pseudo_classes.asp
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
Hope you get an idea about pseudo-elements and pseudo-classes. Thanks for taking your time and reading this article. This article was originally published in my blog.
If you found this article useful do follow me on Twitter. Feel free to contact me anytime to discuss or share your ideas.
Top comments (0)