PSEUDO ELEMENT IN CSS

Pseudo Class Selector in CSS is used to select the element by either tag: || or tag::, which are called Semi-colons. They are used in many ways in CSS, but the most epic way to take advantage of this tag is to provide anything on the webpage without being present in HTML. EPIC isn't it

Types of Pseudo Selector

To be really honest there are many pseudo-selectors in css, As many, we would never use in our entire life, But there are a few very important ones that I think we'll use almost daily as Front-End Developers.

1. General Pseudo Selectors

• i.e. which can be used for any HTML tag, or Class or Ids

::before

:Before element is mainly used to place anything just before the element that can be a LINK or PICTURE or SVG or DESIGN and it ends with your imagination only, important thing is that whatever you want to place inside, has to be the value of a content : " "; property.

so the code would look something like this:

.class::before{
content : 'Hello' ;
}
/* if you want to put a picture in here */
.class::before{
content: url(' link ');
}

::after

::After element is mainly used to place anything just after the element. Which can be a LINK or PICTURE or SVG or DESIGN and it ends with your imagination only, important thing is that whatever you want to place inside, has to be the value of a content : " "; property.

so the code would look something like this:

.class::after{
content : 'Hello' ;
}
/* if you want to put a picture in here */
.class::after{
content: url(' link ');
}

:hover

:hover selector is the blindfolded, the most used pseudo selector in history. What it does is when applied on any tag, adds a new state to it i.e. hover state ( when the mouse comes on top of it without any click or so ) which then can have different CSS properties then that of normal state. in-short, the CSS property will only be visible when we take our mouse on top of the element.

:hover{
cursor : grabbing;
color: white;
background-color: blue;
}

. little Movement with hover state

Here is how I did it

2. Link-related Pseudo Selector

• i.e. this would work with links <a> </a>, or any HTML tag which takes href=" " as an attribute.

:link

:link selector is a bit tricky, let me explain:-

but first, let's see its syntax for reference

a:link { color : 'blue'; }
/* this will change the linking text color to blue only until the is not visited. */

• It shall work with any tag that accepts href, but only and only works with <a> </a>, so we can write it this way as well

  :link{ color : 'blue' }
  

• Now, it has the same precedence as :hover so it should only be written with it.
• So, don't use it.

:visited

:visited selector only shows its property when the link is visited at least once, which signifies that this link has been visited once before. this one is the default behavior of any anchor tag in HTML

/* syntax is */
a:visited { color : 'purple' }

:active

• Can be used for buttons as well.
• :active selector is used for showing a little animation while a user is interacting with the link, i.e. while being pressed the button shrinks a bit.
• Syntax

  btn:active { color : 'white' }
  

Input-related Pseudo selector

• i.e. those selectors which works best with input fields .

:focus

As the name suggests if the input field is in a focus state (it has been interacted with) then the CSS property will show.

#userName:focus{
background-color : 'grey';
border : 2px solid black;
}

:disabled

As the name suggests, it's used to disable some input fields for any reason. Although it's an attribute as well in HTML input field. So don't confuse if both are same.

#country:disabled{
background-color: grey;
}

List-related pseudo selector

• i.e. Number or ul which has many li inside

:nth-child()

With help of :nth-child() we can choose and pick any child of any ul or div which lots of children element inside them to be more precise. Here we can use some logic to pick the child we choose, but by default there are some helpers like

• odd

automatically selects the odd number elements.

• even

vice-versa of odd.

• but mostly we have to do use our logic and do some calculations to pick the right one like-

(An+B)

• Here,
  • A means any integer to start the index with.
  • B is an integer as well. it's used to increment the value for offset.
  • n is initially 0 but gets incremented with 1 for every sibling (if there are 4 siblings, n starts with 0, goes to 1, and last n value is always number of sibling - 1)

:first-child

• Exactly, you got it.

li:first-child{
border: 2px solid black;
}

:last-child

• Yeah, very good keep it up!

li:last-child{
border: 2px solid black;
}

Thank you for visiting