DEV Community

Cover image for 12 Types of Advanced CSS Selectors!! | (Part-1)
Preethi⚡
Preethi⚡

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
.parent-container > p {
  color: #ff8847;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.parent-container  p {
  color: #ff8847;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
/*General sibling*/
p + p{
  background-color: lightgreen;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode
.panda ~ .panda{
  background-color: lightgreen;
}
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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 }
Enter fullscreen mode Exit fullscreen mode

is exactly same as,

.success{background-color: green}
Enter fullscreen mode Exit fullscreen mode

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;
 }
Enter fullscreen mode Exit fullscreen mode

* 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;
 }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
afif profile image
Temani Afif • Edited

Note that you are not allowed to have a <div> inside <p>. Your HTML is not valid and the browser will transform it to something different: stackoverflow.com/q/9852312/8620333

Collapse
 
preethi_dev profile image
Preethi⚡

Hii Temani Afif, Really appreciate your response😍 and I accidently closed the unused p tag after div. I repaired that.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

That sounds good, you learn from mistakes :) keep it up!

Nice

Thread Thread
 
preethi_dev profile image
Preethi⚡

yaa sure Atul and love that gif😍

Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

cheers

Collapse
 
exm profile image
Mokhtar ExM

Great 🔥, thanks.

Collapse
 
preethi_dev profile image
Preethi⚡

Hii Mokhtar ExM, Thanks for your feedback and hope we will meet on part-2