CSS Pseudo Selector CheatSheet
Style specified parts of an element and State of an element with Pseudo Selectors.
Hi there,
Gear up people, We are going to deep dive into CSS Pseudo Selector, It's very useful while you are designing your website using CSS.
What is CSS Pseudo-classes
CSS Pseudo class is a keyword added to a selector that is used to define a special state of an element.
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
Let's see it syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Important CSS Pseudo Classes
| Selector | Example | Description |
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | a:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> 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 <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects every <p> element with a lang attribute value starting with "it" |
| :lang(language) | p:lang(it) | Selects every <p> element that is the last <p> element of its parent |
| :last-of-type | p:last-of-type | Selects every <p> elements that is the last child of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | SSelects every element that is not a <p> element |
| :nth-child(n) | :nth-child(n) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :root | root | Selects the document's root element |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :visited | a:visited | Selects all visited links |
| :valid | input:valid | Selects all elements with a valid value |
What is CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
It can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
Let's see it syntax
The syntax of pseudo-classes:
selector::pseudo-element {
property: value;
}
Important CSS Pseudo Elements
| Selector | Example | Description |
| ::after | p::after | Insert content after every <p> element |
| ::before | p::before | Insert content before every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every element |
| ::first-line | p::first-line | Selects the first line of every element |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
That's all for this article and with that, it's a wrap! I hope you found the article useful. Thank you for reading, If you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback!
I create content about Programming, Design, and Technology, If this is something that interests you, please share the article with your friends and connections. You can also subscribe to my newsletter to get updates every time I write something!
Ta da! Until we meet again Happy Coding! ❤️