working with Pseudo-selectors & Nth child

::before and ::after are great alternatives to add extra styling to our web page without adding additional content to html file.

pseudo-elements will not create separate markups before/after the specified tags. They are added before/after the content in the same tag.

We can't add pseudo-elements to the img tag because img tag doesn't have content and the img tag itself acts like content.

pseudo-elements are inline by default. We can add display:block to take block-level space.

::before

Example 1 :

        <form>

        <label class="red" for="first name">First name</label>
        <input type="text" name="first name" id=""><br>

        <label for="password">Password</label>
        <input type="password" name="password" id="">  <br>

        <input type="button" value="submit">

         </form>

writing css for this html code will be like:

         <Style>
            .red::before {
            content: '.....content we can give here.......' ;
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: rgb(255, 115, 0);
            }
         </Style>

::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.

Example :

writing css code will be like:

         <Style>
            .red::after {
            content: '.....content we can give here.......' ;
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: rgb(255, 115, 0);
            }
         </Style>

the content of above code will be displayed after the element which is targeted

using :hover

:hover should be written after the class-name and before the pseudo selector syntax: .class-name:hover::before or .class-name:hover::before

When we provide hover on this class, then it got displayed only when mouse hovers over there. It got applied to all the input where there is .red class. Here, it is displayed after the password also.

<Style>
        .red:hover::after {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: rgb(255, 115, 0);
        }
    </Style>

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.

let see Nth child selector

How it actually works?

:nth-child(n) is a pseudo selector that targeting of specific elements following a specific pattern that matches elements based on their position.

note: n can be an (even, odd), formula, or number

Syntax :

selector:nth-child(n)
selector:nth-child(number) {   property: value }

simply targets every element that is the nth child of the parent element.

Let's target odd nth elements of the list.(1,3,5,7,.....)

li:nth-child(odd){
    background-color:#51E1ED;
}

emaple :

that was all about :nth-child().

thanks for reading...😊😊😊.........