Pseudo-Classes In CSS

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