Pseudo Selector

For a better understanding of pseudo selector, we need to know about

1. Pseudo Class

2. Pseudo Element

Starting with Pseudo Class

• Pseudo class is used to define a special state of an element and a special state means when some task is done by the user, then in the frontend, the pseudo-classes help us to style that element (for example:- visited links and unvisited links should appear differently).

• We don't need javaScript or any other script to use those states.

• These pseudo-classes use with a single colon(:).

Syntax

Selector :Pseudo-class{
    property: value;
}

- Types of pseudo-classes:-

1. :hover
2. :link
3. :visited
4. :active
5. :focus
6. :first-child
7. :nth-child
8. :last-child

And many more...

• Many pseudo-classes used for selecting elements in DOM (for example=> :first-child, :last-child, :nth-child).

• We can use multiple Pseudo-class in selector until the DOM tree of your selector matches and all rules are applied then there is no problem nesting pseudo-class.

• Pseudo class allowed anywhere in Selector.

Example on=> :hover

CSS Code

button:hover {
  color: blue;
}

Output of :hover:- Whenever the cursor is on to the button it will apply these style which is defined in this CSS selector code(all style which is in curly braces ☝️).

Example on => :focus

input:focus {
    background-color: blue;
}

Output of :focus:- Whenever the input area is clicked then the style which is defined in this |CSS selector with pseudo-class| is applied to that input area.

Example on => :first-child & :hover (together)

div button:first-child:hover{
    background-color: aqua;
}

Output:- In this example, we have used 2 types of pseudo-class and it will select a first child of div and apply a hover pseudo-class on it and whenever the cursor comes top of the button it will change the background color to aqua(all styles will be applied that is specified in curly braces☝️).

Note: If I discuss all pseudo-class then this blog post is going to be so long so it is better whenever you want some pseudo-class other than what we discussed then explore the documentation.

Let's move to the next topic in pseudo selector which is Pseudo element.

Pseudo Element

• A pseudo-element is a keyword that is added next to a selector and that helps us in selecting the specific part of the selected element.

• It is represented with a double colon(::).

Syntax

selector::pseudo-element {
  property: value;
}

- Types of pseudo-element are:-

1. ::after
2. ::before
3. ::first-letter
4. ::first-line

And many more

• Selecting the specific part of the selected element will give us the flexibility to apply the style to that.

• For the pseudo-class, we use pseudo-class with single(:) and for the pseudo-element, we use pseudo element with double(::). However, this is not present in the older version of the web3 consortium specification.

• The pseudo-element may only be appended after the last simple selector.

• We can use only one pseudo element in a selector and it must appear after the simple selector in the statement.

Example on=> ::after

In ::after pseudo-element content must be there. content value can be empty also

p::after { 
  content: " - Lean this";
}

Output of ::after:- content is added after HTML text of p (paragraph).

Example on=> ::before

In ::before pseudo-element content must be there. content value can be empty also

p::before { 
  content: "Lean this - ";
}

Output of ::before:- content is added before HTML text of p element

Example on ::first-line

p::first-line {
  background-color: blue;
}

Output of ::first-line:- p element (paragraph) first line of HTML text turns the background color to blue.

Note If I discuss all pseudo-element then this blog post is going to be so long so it is better whenever you want some pseudo-element other than what we discussed then explore the documentation.

If you like this blog then give this blog a big thumbs up 👍 and this will give me huge motivation.

Guidance from @hiteshchoudharylco