Pseudo classes and pseudo elements

pseudo is never real but useful

Namaskaram friends, I hope you all are doing great and are safe & sound. Today we are going to cover an interesting and simple topic but at the same time confusing also; don’t worry I’ll try to make it clear as much as possible so that next time you use it with confidence. Let’s start :)

CSS is integral part of web development and I am confident that now and then all of us has encountered with pseudo classes and pseudo elements. Although it easy to use but sometime it looks confusing to understand what really are pseudo-classes and pseudo-elements and when to use them.

Today we are going to understand the difference between the two, how and when to use each of them.

Pseudo Classes

If you are a web developer or designer you must have used or encountered pseudo classes, these are used to define or provide a special state to any HTML elements. Pseudo means false which means that these are not really a selector or HTML element but a special state, which we can select using some special syntax, please read below.

e.g. You may have a button, a textfield, a section or any other HTML element in your web page or web application where you would like to show a special state or behavior such as on mouse-hover, on field focus, then how to achieve this?? Thanks to pseudo classes to our rescue :)

Syntax definition of pseudo class

Below is the syntax to define a pseudo class, this uses the selector on which you want to use special state hence using pseudo class and the property for which you want the special state.

/* notice the single colon after selector */
selector:pseudo-class {
   property: value;
}

Here are couple of examples to make it more understandable.

/* when you mouse over a link, change the default color */
a:hover {
  color: #FF00FF;
}
/* when a button is disabled, change the background and foreground color */
button:disabled {
  color: red;
  background: inherit;
}

normal button vs pseudo class on disabled

Pseudo elements

Pseudo elements seems to be similar to pseudo classes but in reality they are different and serve a different purpose. Where pseudo classes are for special state, pseudo elements are for special part of the HTML elements; confusing?? Of course, but let’s try to remove the confusing clouds;

HTML elements logically have two parts one is element itself e.g the paragraph, button, textfield etc. and other one is its state or behavior like hove, visited, disabled etc.

So, pseudo classes are to apply CSS to change state of element while pseudo element is to target some specific part of the element e.g. first line in paragraph, before and after off an element, first letter of some text etc.

Syntax definition of pseudo element

/* notice the double colon after selector */
selector::pseudo-element {
  property: value;
}

Here are couple of examples to make it more understandable.

/* change the color of first line of a paragraph */
p::first-line {
  color: blue;
  font-variant: small-caps;
}
/* when a button is disabled, change the background and foreground color */
button:disabled {
  color: #FFFFFF;
  background: #0F0F0F;
}

paragraph with first line targeting with pseudo element

Interesting, right!! I hope this will help you to understand the difference in the above two pseudo that we use in CSS very frequently. If you would like to know more about specifically ::before and ::after pseudo elements, drop me a comment and I’ll try to write more on the topic.

Till then have a nice day :)