Psuedo Classes & Pseudo Elements in CSS

Hey everyone, this article covers about Pseudo Classes & Pseudo Elements in CSS.

What you will learn in this article

Pseudo Classes use case with example

Pseudo Elements use case with example

So Lets understand the terms

Pseudo Classes:- lets you style a specific state of an element with a selector. Pseudo classes only applied to interact with the element in some way.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

selector:pseudo-classe {
  property: value;
}

Pseudo Elements:- lets you style a specific element in the DOM

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax

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

Representation: -

Please note that, One colon (:) for Classes. two Colons (::) for Elements The double colon (::) was introduced in CSS3 to differentiate pseudo-elements such as ::before and ::after from pseudo-classes such as :hover and :active.

Quite Confused? OK, lets understand them one by one.

Pseudo Classes - Example

1. link
2. visited
3. hover
4. active

Go Code Now

HTML

  <a href="https://www.google.com/webhp?    hl=en&ictx=2&sa=X&ved=0ahUKEwipoPTShoX5AhUTyHMBHScOA1gQPQgJ">Google   Doodle</a>

CSS

  a:link{
    font-color: red;
  }

  <!-- when we visited once on a link, then the color of the link will be changed to 'green' -->
  a:visited{
    font-color: green;
  }

  <!-- when we hover on a link, then the color of the link will be changed to 'orange' -->
  a:hover{
    font-color: orange;
  }

  <!-- when we keep clicking on the button, the color will turn 'purple' at that time. -->
  a:active{
    font-color: purple
  }

---

Pseudo Elements: - Examples

1. ::first-letter - pseudo-element will let you style the first letter of text

   h3 + p::first-letter{
   font-style: normal;
   margin-right: 5px;
   }
   

   Here, h3 + p -> Paragraph child element immediate to h3 parent

2. ::first-line - pseudo-element will let you style the first line of text

   p::first-line {
    color: goldenrod;
    font-weight: bold;
   }
   

3. ::before and ::after - pseudo-elements create a child element inside an element only if you define a content property.

   div::before {
    content: "before";
   }
   div::after {
    content: "after";
   }
   

   HTML - how it looks like

   <div>
     before
    <!-- Rest of stuff inside the div -->
    after
   </div>
   

   The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.

4. ::selection - pseudo-element allows you to style how selected text looks.

   ::selection {
    background: green;
    color: white;
   }
   

Not enough? Refer these articles

• https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

• https://careerkarma.com/blog/css-before-and-after/