12 Types of Advanced CSS Selectors!! | (Part-1)

Hey Gang, Really glad to see your Curiosity about learning of advanced concept. So, I'm care to save your time and get this show on the road🎉.

Don't worry, Today i didn't explain about common CSS selectors like class, id, Element.

Start to exploring about

• > Descendant children
• + Adjacent sibling
• ~ General Sibling
• * Universal(UnKnown behaviour)

7 Different type of Attribute Selector

• [attr]
• [attr=value]
• [attr~=value]
• [attr|=value]
• [attr^=value]
• [attr$=value]
• [attr*=value]

Seems a little bit weird😅. Uh, it's not much complex like you think about that. I'm here to make it easier for you😉. So, let's get started.

> Descendant children Selector

<div class="parent-container">
  <h1>> DIRECT CHILDREN</h1>
    <p>I am the direct child of parent😁</p>
        <div class="child-container">
            <p>Oh no😣, I can't be the direct child of parent.</p>
        </div>
</div>

.parent-container > p {
  color: #ff8847;
}

In above HTML template, there is a two ptag right. But, The 1st p tag will be the direct child. unfortunately, 2nd p tag will not be direct child.

Can you guess why?? Hm, May be 2nd p tag under child-container which is not directly under .parent-container...

But, That's the right answer🎉. 2nd p tag is not directly under .parent-container which is under .child-container. If you feel not well, Just play around in codepen get clear with concept.

Guess the difference below👇🏻👇🏻.

.parent-container > p {
  color: #ff8847;
}

.parent-container  p {
  color: #ff8847;
}

If you guessed, That's stunning. If can't, Not a big problem and we will sort it out.

.parent-container  p {
  color: #ff8847;
}

The above one will select all the p tag inside the .parent-container, which doesn't care about the p tag is direct child or indirect child. Just apply the styles if it's under the .parent-container.

+ Adjacent sibling

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

<div>
    <p>No one before me😭</p>
    <p>hurray one before me🥰</p>
    <p>hurray one before me🥰</p>
</div>

/*General sibling*/
p + p{
  background-color: lightgreen;
}

Above Definition is the best one to define adjacent sibling. If you feel need some practice. Why wait, go ahead and practice in codepen below through tiny piece example.

~ General Sibling

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

Seems little bit confusing. Don't worry, it's not a big deal. I will explain it through example below. Then, again read the above definition and i am sure you can understand what it means.

<div>
    <p class="panda">Panda here🐼</p>
    <p class="cat">No one before like me😾</p>
    <p class="panda">One before like me🐼</p>
    <p class="rat">no one before like me🐀</p>
    <p class="panda">one before like me🐼</p>
</div>

.panda ~ .panda{
  background-color: lightgreen;
}

In above HTML Template, we use ~ general sibling in .panda class. Unlike adjusent sibling, The general sibling combinator (~) separates two selectors and matches the second element(.panda), if it follows similar element(.panda) before that (it's not necessary immediately before the element), and both are children of the same parent element.

If you feel need practice, feel relax and see below.

* Universal(UnKnown behaviour)

The CSS universal selector (*) matches elements of any type.

For instance:

*.success{ background-color: green }

is exactly same as,

.success{background-color: green}

In CSS world, Both are same which both guys are doing the same job.
(The asterisk is optional with simple selectors)

Hey still travel with me, Really your accountability is unbelievable😍. So, I wish to give a special info for you😉.

UnKnown Behaviour

You have probably already seen* are used for resetting things like,

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

* selects EVERYTHING. Every single thing
(except ::before and ::after...).

Above note is surprising right. Which means you can't apply those resetting things in ::before content and ::after content. Hey why get frowned up for this behavior. Chill, There is a solution for every problem. Trust me and see below.

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

I already promised you, I will explain 12 different types of advanced CSS selectors. still, I explained the 5 selectors. I can understand your feeling If I continue this blog which makes you feel overwhelmed. So, Hope I do not leave you with an empty hand and we will continue remaining selectors in part-2.

If you loved this blog, Then give a endearing heart💝 which really lot to me. I love the discussion with you, If you feel not good at styling concept or any doubts.

Thanks for Reading!!
Preethi
- Make your CSS life easier