Pseudo- Classes & Elements

Pseudo- Classes & Elements

Pseudo classes start with`:` and Elements with`::`. Why both work in some cases ? Let's find out why is that and understand what actually are these

Pseudo means 'false' .

Pseudo Classes and Pseudo Elements are special types of selectors.

Why does Pseudo Elements and Classes called so ?

As we know what Pseudo means , so pseudo elements and classes mean that these actually do not technically exist in the DOM in a i.e. these weren't inserted in the code ,it's added with CSS. And hence the word Pseudo before their names.

WHAT ARE PSEUDO CLASSES?

The pseudo classes are technically a condition or state on the selector.

//Syntax
selector:pseudo_class{

}

Now what does this mean ? Let's understand with examples of Pseudo Classes -**

i) Hover(:hover)

When the cursor goes on the button i.e. the hover state has become true or you can say the hover condition has been met the styling gets applied to the button element in the DOM or HTML.

REAL-TIME Example : AMAZON ezgif.com-gif-maker (2).gif

Example : On Hover the styling of the button changes

Orange and White Funny Dating Animated Video Presentation (2).gif

//It changes the styling when we hover(place the cursor) over an element
button:hover{
border: 2px solid red;
border-radius: 5px;
color: red;
background-color:transparent;
}
ii) Focus(:focus)

When the focus is in the element e.g. in input if the cursor is placed in the input box or in case of select element when the dropdown opens i.e. the focus is in the element of select then the styling is applied.

Orange and White Funny Dating Animated Video Presentation (1).gif

      input:focus {
        font-size: 2em;
        background-color: #ff0000ec;
      }

There are multiple such pseudo classes , so a little work for you. Some pseudo classes work for links and have a order to override one's styling. Try the same on <a> tag. ( HINT - LVHA order )

WHAT ARE PSEUDO ELEMENTS?

Pseudo elements are used to style a part of selected element(via selector) unlike pseudo classes that style the entire element on a state/condition.

//Syntax:
selector::pseudo-element {
  property: value;
}
i)First Letter (::first-letter)

Add styling to the first letter/alphabet in the tag.

//This changes the font-size and color of the first letter in <p>
 p::first-letter {
        font-size: 2em;
        color: #8a2be2;
      }

Hover Pseudo Selector.jpg

Unlike pseudo classes the styling is applied to a part of element(<p>) and not the entire <p> .

ii)Before(::before)

Using ::before after the selector allows us to add content or styling BEFORE the content of the elements and NOT the elements itself. content property is a must to be present in the styling even its null i.e. (''). If this property is missing the styling/content won't be visible.

Before Pseudo Selector (2).jpg

Syntax:
selector::before{
content : content_value
}
/* content_value can be "" , url() , open-quote etc. 
There are many options available.*/

//adds `"` before the CONTENT of <h1>
  h1::before {
    content: open-quote;
  }
//adds an * (depicting required field) before the <label>
 label::before {
 content: "*";
    display: inline;
    color: #ff0000;
     font-size: 2em;
  }

Now there is a misconception that using ::before will add the things before the element, but it's not the case. It adds up before the Content of the Element and not the Element.

Before Pseudo Selector (1).jpg

NOTE: Multiple values in content can also be added , it works Example:

content: open-quote "*";
iii) After(::after)

It's similar to before , with the difference of the placement i.e. it adds up styling/content .

Have you seen , busy depicted via red circle on initials/profile Or green circle to depict Online ? It can be built using Pseudo-elements.

REAL-TIME Examples: Status on Discord , Notifications Count of Gmail can be built using ::after or ::before too.

After Pseudo Selector.jpg

   span {
        position: relative;
        padding: 10px;
        border-radius: 50%;
        background-color: #b17ae7;
        color: #ffffff;
      }
// Added red circle on beside the initials 
      span::after {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: red;
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
      }

WHY :AFTER/:BEFORE AND SOME OTHER PSEUDO ELEMENTS ALSO WORK?

As per CSS3 , a clear distinction has been made between pseudo elements and pseudo classes via :: and : respectively on the basis of their core functionality which clearly wasn't there in previous versions and was a bit confusing. So , as per the latest norms :: is preferred and recommended to use , but due to browser compatibility to older versions :after/:before also works.

WITH WHAT ELEMENTS DOES ::AFTER & ::BEFORE DOESN'T WORK?

The elements that do not have the content box where element's own content is placed i.e. replaced elements . Such as : <img> , <br>, <iframe> etc.

WHAT ARE BIG NOS WHILE USING PSEUDO ELEMENTS?

a) Using pseudo elements in the middle of selectors or pseudo-classes.

Example : Wrong Examples.jpg

Correct Examples (1).jpg

The pseudo elements should be at the LAST to make it work.

b) Using multiple Pseudo Elements with a selector at one time .

Correct Examples (2).jpg

If multiple pseudo elements are to be used on a single selector , it should be done separately

SUMMARY

Untitled.jpg

Find all the code used in the article below: github.com/Parul1999/CSS-Pseudo

Did you find this article valuable?

Support Parull Kohhli by becoming a sponsor. Any amount is appreciated!