How do CSS selectors actually work?

Question

I've looked around for information about this, but since I'm not sure of the technical names of the process, I can't seem to find an answer.

Let say I have this:

.some_class {}
.some_class .sub_div {}

<div class="some_class">
  <div class="intermediate_div">
    <div class="sub_div">

From my understanding, the selector .some_class .sub_div should apply to the div 'sub_div'. But it appears this is not the case as I always have to go back and change it to '.some_class .intermediate_div .sub_div'.

Is this correct or am I missing something?

My impression was that .some_class .sub_div should apply to any instance of .sub_div within the .some_class element.

What exactly isn't working? Show an *actual* example, with HTML and CSS, and state clearly a) what is expected and b) how we can see that it does not work. And please don't use absurd titles; everyone knows that CSS selectors actually work, you just have some *specific* problem with CSS. — Jukka K. Korpela, Feb 08 '15 at 11:07

score 2 · Answer 1 · edited May 23 '17 at 12:06

2

.some_class .sub_div would work without any confusion. But you're actually right that .some_class .intermediate_div .sub_div would work but .some_class .sub_div wouldn't because of css specificity.

Look below for an example:

div.intermediate_div .sub_div {
   color: red;
}
.some_class .sub_div {
   color: blue;
}

What would you think color blue is applied? No. The red color is applied because div.intermediate_div .sub_nav higher specificity than .some_class .sub_div and thus in that case you may be wondering to see that

.some_class .intermediate_div .sub_div{
   color: blue;
}

works. Because it has more specificity than previous selector.

Look more about css specificity here and in my previous answer.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 08 '15 at 01:19

Bhojendra Rauniyar

83,432
35
168
231

Thanks for the answer. I understand about the specificity of the selector. That is why I'm confused why .some_class .sub_div does not apply to .sub_div when there is 1 or more classed elements between .some_class and .sub_div – Lee Loftiss Feb 08 '15 at 01:22
+1, but It would probably be worth adding a link or giving a brief explanation of specificity and how it works technically (including weights for element and id selectors) as opposed to just this specific case. – prodigitalson Feb 08 '15 at 01:24
1

You may look about css specificity in my previous answer [here](http://stackoverflow.com/questions/27203293/does-the-css-direct-decendant-not-have-any-value-in-selectivity/27203341#27203341) – Bhojendra Rauniyar Feb 08 '15 at 01:25
Interesting post Bhojendra. Especially how an ID trumps class. Of course it makes perfect sense, just never thought about it before. – Lee Loftiss Feb 08 '15 at 01:33
Unfortunately I still don't. When I try to use .some_class . sub_class, .sub_class elements are not affected unless I add the intermediate classes between .some_class and .sub_class. – Lee Loftiss Feb 08 '15 at 01:40
count the selector and calculate it with css specificity table that I've answered in my previous post... – Bhojendra Rauniyar Feb 08 '15 at 01:43

score 1 · Answer 2 · answered Feb 08 '15 at 01:27

CSS will apply the most specific rule to each element. In the case of two equally specific rules, it will apply the last defined rule.

Take a look at this fiddle, which uses the following html:

<div class="some_class">
    Some class
    <div class="intermediate_div">
        Intermediate
        <div class="sub_div">Sub Div</div>
    </div>
</div>

and this CSS:

.some_class {
    color: red;
}
.intermediate_div {
    background-color: blue;
}
.intermediate_div .sub_div {
    background-color: orange;
}
.some_class .sub_div {
    background-color: green;
}

All of the text is red, because some_class is red, and everything inside that div inherits that style.

intermediate_div has a blue background, which would be inherited by sub_div. But sub_div has two more specific rules defined.

Both of those rules with two class selectors are equally specific. Both are more specific than the blue background because they select based on two classes not one. The orange background is ignored, because the last defined rule is used when they are equally specific.

When you use an element id, that is more specific than a class because ids are (supposed to be) unique. So in this modified fiddle, you can see that sub_div takes styles from #div1 even though that rule is defined first and only has one selector. It still takes precedence over rules defined later and rules with two selectors, because it uses a unique id.

It sounds like you are saying if I have .some_class . sub_div {background-color: red;}, then a div anywhere within .some_class with the class .sub_div would have a red background. But this is not what I'm finding when I try to structure it this way. WHen I've structured it this way, .sub_div does not have the red background unless I add .sub_intermediate to the selectors. — Lee Loftiss, Feb 08 '15 at 01:36
Yes, if I understand right that's what you should get - check this fiddle: http://jsfiddle.net/ddomwycm/ if you don't get the same result, could you post an example where it isn't working as expected? — James Waddington, Feb 08 '15 at 01:43
WOW! Unfortunately I don't have any examples as it was something I 'discovered' long ago and have always just built these excessively long selectors since then. I am just now asking this question because I've used css selectors more now and understand them better but could not understand why this was not working. Now that you have shown it should work, I will try again in my next project. Thanks. — Lee Loftiss, Feb 08 '15 at 01:47

How do CSS selectors actually work?

2 Answers2