This article explains how to use different signs like space, +(plus), >(greater than) and ~(tilde) in CSS selector and their differences. Before getting started, let us take a sample code to understand the signs.
<div id="container">
<p>First</p>
<div>
<p>Child Paragraph</p>
</div>
<p>Second</p>
<p>Third</p>
</div>
Here is outline structure for better understanding:
Video Tutorial:
Space:
It is the descendant selector. It allows you to style all the nested child elements of a parent element, regardless of how deep they are in the hierarchy.
div#container p{
background-color:green;
}
It will target all p tags within container div in our example.
> Sign:
It is a child selector, which selects DIRECT child elements of a specified parent element.
div#container > p {
background-color:green;
}
It will target all P element which are direct children of container div, not children of child div.
+ (plus) Sign:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
div + p {
background-color:green;
}
It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.
~ (tilde) Sign:
It is general sibling combinator and similar to Adjacent sibling combinator. The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.
div ~ p{
background-color:green;
}
It will target all P elements which follows div i.e. both second and third.
In this post, we saw how the plus sign +, tilde ~, space and greater than > symbols are used as CSS selectors to target specific elements based on their relationship to other elements in the HTML structure.
Do let us know how you are using it practically?
All of this should be avoided. Reason content may change especially on real-world apps and CSS will break.
+1 Me personally haven’t used the “+” nor “~” in my entire programming life span which is roughly 15+ years. I try to always give any node a distinctive className. Makes things easier to understand, and will not break things when you add/remove nodes in between the lines. I also don’t like confusing symbols that require me to think/understand what it does, it hurts my brain…
hold the .bottom div and CSS the .top div like
how to add css like this ?
This is really an awesome guide. Learned a lot from it.
Thanks for explaining this so clearly! This helped a lot.
This is great, never used this selectors but now what I know about them I shall :)
Thank you so much for this
this really help better understand css…
Tiny article overwhelmed by replies of gratitude. Happy to add mine. Thank you!
Do we have “-” ? , means , select the element before.
For eg:
a – span
{
}
something like that ?
No, that does not exist in CSS. It can be only programmed in Javascript.
Question: So are these symbols only for referencing the Element hierarchy and not for class/style hierarchy?
What is the proper way to reference class/style hierarchy?
it can be. just place CSS selectors in place of element, it will work fine.
wow, I’m reading this in 2020 and this is still immensely useful.
2020 in a few weeks and still looks like this beautiful article is one of the most useful on the topic.
Yes. It’s really helpful. Sometimes there are cases where we can use only this symbols
Agreed man.
Bundle of Thanks !!!!!!!! Great Explanation in Simple one or two paragraph.
hello and what does mean * ??
* {
box-sizing: border-box;
}
* means all elements.
For example:
div *{
background-color:red;
}
It will make that all div children have background-color as red.
Hi, the selector * is a universal selector, that means it applies to all elements.
* is called the star selector. It targets the entire content of the html file. In terms of CSS Specificity, it is the lowest.
The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height.
Reference: https://www.w3schools.com/css/css3_box-sizing.asp
The * selector selects all elements.
You could use it e.g. like:
* {
margin: 0;
padding: 0;
}
Then you will remove default padding and margin from every element like body, p, li, etc.
That’s the universal selector. It applies the properties to all and every single element.
General selector, selects all elements in a page
* means all elements
“*” is universel selector and this is uses to select whole content
I really like this post because I have no knowledge about it.
Learn by example and your examples are clear and work! – thanks
well thanks,
but i still cannot quite understand on the ~
‘~’ is similar to ‘+’. The difference is that with ‘+’ the second sibling (specified by the 2nd selector) has to immediately follow the first sibling (specified by the 1st selector) whereas with ‘~’ the second sibling(s) does not have to necessarily be immediately after the first sibling, therefore it matches every valid element that follows the one specified by the 1st selector so it can be more than one element.
Best tutorial on internet about CSS selectors, it defines selectors in very easy way and with examples which help user to co-relate the things.
Thank you
Thanks man for the explanation. point to point explanation wow.
Wow !! The best explanation, thank u man, you saved me.Untill now, i did not make difference between .parent .child and .parent>.child.
Clear, precise and to the point. super!
hope you keep helping us
I guess I’m the only one still confused that did not understand the ones with the ~ or the + and what he means by preceding when it looks like they don’t precede the one selected. I will have to actually type this all up and see it for myself maybe to really get it.
@Jen Charney,
From what I understand they have to be on the same level. If its nested its not counted as preceding.
top tip – make sure you indent your tags – this makes it much easier to see which elements precede another and which elements are nested.
Simple and great!
Nicely explained. Thank you :)
You added the ocean in the box. thanks man
Yeah, I got it, man. Really well explained.
Thanks you
Thanks man. Very clear and good read for me too.
really good description with screensort….
really good
Thanks for simplifying this. I was having a very difficult time in differentiating the adjacent child sibling declarations. You have cleared this up and really simplified the rest of the subjects in a cohesive and intelligible manner. Cheers, Kudos and a Chocolate Chip Cookie!!
Very concise. To the point. Wonderful read and highly effective writing. Thank you very much for your time and best wishes to you and your blog.
Great. Thanks for this blog.
Excellent. Helped me a lot.
for the + operator, I’d add that the elements are on the same level of nesting.
Nice , did not knew about 2 and 3 before.. but used 1 in routine mostly..
is there any sign which can be used to select both child and its sub child?
thanks for such a clear explanation of those 3 css symbols
cool explanation!
Short and precise. very nice. Thanks
very nice explanation
Thank you for such useful information…
Thank you it’s very useful. Really you shown the difference between them
Very Useful Post… Thanks a Lot…
Not working in IE 7/8. I do not understand. Why ?
coz shit happens with ie :D …
Clean and simple. Good job!
Thanx
Thank you so much! Really useful
Really useful thanks. A lot better than needless class assigning.
Hello,
This is a really good read for me, Must admit that you are one
of the best blogger I ever saw. Looking forward for your next one.