Selectors in CSS : Easy to Target

I know some times its confusing to target elements which has two many parents, childs n all. Here is a easy recall for you guys.

First understand then implement

Selectors are nothing but a targeting a particular element present in a group.

Let see methods of targeting elements one by one.

First make some template in HTML

<div>
        <h1>See how easy to understand selectors</h1>
    </div>
    <div>
        <ul id="white">
            <li class="orange">One</li>
            <li class="orange">Two</li>
            <li class="orange">Three</li>
            <li class="orange">Four</li>
        </ul>
    </div>
    <div>
        <h2 class="red">I am using chain selector</h2>
    </div>

    <div class="child">
        <ul>
            <li class="red">Ajinkya</li>
            <li>Rushikesh</li>
            <li>Omkar</li>
            <li>Akshay</li>
        </ul>
        <div class="blue">
            <h3>Learn & implement</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div>
            <ul>
                <li>Great</li>
                <li class="siblings">Place</li>
                <li>To</li>
                <li>Learn</li>
                <li>CSS</li>
            </ul>
        </div>
    </div>

Just see how it looks

Now just add some CSS using selectors.

Universal selector

It is kind of selector use to decorate whole the page with common code or css.

*{
        font-family: 'Poppins',serif;
        background-color: #d0ff8f;
  }

Background color & font get applied on whole the page & text. See how it get impact our page.

Individual selector

This is used when you directly want to target any attributes like h1, h2, h3, p, div etc

Lets see in CSS

    h1{
        background-color: #fff;
    }

This background color will hit only the h1 tag present in HTML.

Class & ID

This is very popularly use to target any element. Just add class or id to any element and hit it in the CSS.... Simple !!!

.orange{
        background-color: #ffd65a;
    }

    #white{
        color: #ff009d;
        font-weight: bold;
    }

Note - Class are targeted by "." & ID is targeted by "#"

Lets see in html now

Chain selector

Chain selector is used as a defining continuous elements to hit specific target.

Lets see the CSS & clear out the doubts

     div ul li.red{
        color: #d01010;
        font-weight: bold;
    }

Output....!

By defining the div-ul-li & then class, it will hit the exact element that we need.

Combined Selector

Its is used when two elements have to give same properties. Just give comma in between two elements & hit both at a time.

h2, h3{
        background-color: #ffafaf;
    }

Output...!

Inside an element

This is use when a parent element have more child and want to target specific child.

See the CSS

.blue h3{
        background-color: #8bdcff;
    }

Output...!

Direct child

This is used when you want to target a specific element inside the parent element.

CSS

.child>ul>li{
        background-color: #da61ff;
    }

Output....!!!

Siblings

This is used when you want to hit next element or next elements. Lets see the CSS. That will more clear your doubts.

CSS

.siblings + li{
        background-color: #fff;
    }

Outputs...!!!

CSS

.siblings ~ li{
        background-color: #fff;
    }

Output...!!!

Child targeting

This is very useful selector to reduce the class code of each element. Just put the sequence number of child & hit the target.

CSS

.blue :nth-child(2){
        background-color: #fa3651;
        color: #fff;
    }

Output...!!!

Hope you are clear now how to target elements by different methods.

Thank You.