Pseudo-Classes In CSS
Tags: webdev, css
Published: 2024-01-02 19:12:56

To understand Pseudo classes, you have to understand what are the state of an element?

**CSS States:**
When a user interacts with objects on a page by hovering, clicking or focusing. CSS empowers us to modify styles based on these interactions, offering users guidance on permissible and restricted actions.

**A CSS pseudo-class is employed to specify the unique state of an element**

```
/*In given Block of Code I am giving Style to the button directly*/
.Primary-btn{
color: red;
}
```
What if I don't want to change the style of button directly, and I want to change the style of button for a certain state, here the role of Pseudo Classes comes into play.

```
/*In this Block we are changing the styles for a certain state*/
.Primary-btn:Psuedo Class{
color: red;
}
```
**Classification of Pseudo Classes:**
Pseudo classes can be classified in 6 major types.

```
- Structural Pseudo-classes
  - :first-child
  - :last-child
  - :nth-child(n)
  - :nth-last-child(n)
  - :only-child

- Link Pseudo-classes
  - :link
  - :visited
  - :hover
  - :active

- User Action Pseudo-classes
  - :focus
  - :target
  - :enabled
  - :disabled
  - :checked

- UI Element State Pseudo-classes
  - :checked
  - :default
  - :valid
  - :invalid

- Tree-Structural Pseudo-classes
  - :root
  - :empty
  - :not(selector)

- Content Pseudo-classes
  - :first-of-type
  - :last-of-type
  - :nth-of-type(n)
  - :nth-last-of-type(n)
  - :only-of-type
```
**a)-Structural pseudo-classes:**
These **pseudo classes** are used to select and style elements based on their positions in document, and they enable you to select elements based on specific structural conditions, **including being the initial child, final child, or a specific child within their parent.**

```
div p:first-child {
  /* Styles for the first paragraph within its parent */
};

div p:last-child {
  /* Styles for the last paragraph within its parent*/
}

div p:nth-child(even) {
  /* Styles for even-numbered paragraphs within a div */
}

div p:only-child {
  /* Styles for paragraphs that are the only child within a div */
}
```
**b)-Link Pseudo Classes:**
These pseudo-classes are used to style the links based on there states of interaction.

```
a:link {
  /* Styles for unvisited links */
}

a:visited {
  /* Styles for visited links */
}

a:hover {
/* Styles for links when hovered */
}

a:active {
/* Styles for links when active (being clicked) */
}
```
**c)- User Action Pseudo-classes:**
User action pseudo-classes are used in CSS to style elements based on user interaction with those elements.

```
input:focus {
 /* Styles for a single input element when it is in focus */
}

#section1:target {
/* Styles for the element with ID "section1" when it is the target */
}

input:enabled {
 /* Styles for a single button element when it is enabled */
}

input:disabled {
  /* Styles for a single input element when it is disabled */
}

input[type="checkbox"]:checked {
 /* Styles for a single checkbox input element when it is checked */
}
```
**d)-UI Element State Pseudo-classes:**
UI Element State Pseudo-classes in CSS allow you to style elements based on their state or user interaction.

```
input[type="checkbox"]:checked {
 /* Styles for checked checkboxes */
}

input[type="submit"]:default {
/* Styles for the default submit button */
}

input:valid {
  /* Styles for valid input */
}

input:invalid {  
/* Styles for invalid input */
}
```
**e)-Tree structural pseudo-classes:**
Tree-Structural Pseudo-classes in CSS allow you to select and style elements based on their relationship within the document tree.

```
:root {
  /* Styles for the root element */
}

p:empty {
  /* Styles for empty paragraphs */
}

p:not(.special) {
 /* Styles for paragraphs that are not marked as special */
}
```
**f)- Content pseudo-classes:**
The Content Pseudo-classes in CSS allow you to select and style elements based on the content they contain.

```
p:first-of-type {
  /* Styles for the first paragraph within its parent */
}

p:last-of-type {
 /* Styles for the last paragraph within its parent */
}

p:nth-of-type(odd) {
  /* Styles for odd-numbered paragraphs within their parent */
}

p:nth-last-of-type(2) {
  /* Styles for the second-to-last paragraph within its parent */
}

p:only-of-type {
 /* Styles for a paragraph that is the only one within its parent */
}
```
Thanks For taking the time to explore this Article.

Originally Published on medium, Follow me on Medium
https://medium.com/@bugtimuhammadshahid1/pseudo-classes-in-css-f2f2409a2990
 
Lets Connect on LinkedIn
www.linkedin.com/in/muhammad-shahid-bugti-2a7b43276