Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniel Campbell
Daniel Campbell
10,148 Points

CSS syntax for scope

Hi, I have a pretty basic question about syntax when defining scope in CSS.

does 

.footer div {
}

equal 

div.footer {
}

? if not, can someone explain this or send a reference for CSS scope?

Thanks, Daniel

5 Answers

andren
andren
28,558 Points

I'm not quite sure what you mean by scope in this context, those two rules state different things.

The first example is a rule that basically states: Apply this rule to all div elements found within an element with a footer class.

The second example states: Apply this rule to all div elements with a footer class.

Let's say you had a HTML file containing this:

<div class="footer">Parent Div
    <div>Child Div1</div>
    <div class="footer">Child Div2</div>
    <div>Child Div3</div>
    <div>Child Div4</div>
    <div>Child Div5</div>
</div>

The first rule would target all of the child divs within the parent div as they are all within an element with a footer class, but it would not target the parent div itself as that is not inside of an element with a footer class.

The second rule would only target "Parent Div" and "Child Div2" as those are the only divs that actually have a class of footer.

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Hi Andren,

Thank you. I made an example here: http://codepen.io/cestdani/pen/zorEvQ and can see clearly the difference in syntax now. I'm trying to understand the terminology in CSS so that I can easily search for solutions when I have a question. By 'scope' I mean something like 'traversing', or how to access different elements in a hierarchal way.

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

So...

div.footer {
}

is valid (if footer is a defined class)

but 

footer.div {
}

is not valid because div is an element

is that correct?

andren
andren
28,558 Points

Technically they are both valid because footer is also an html element, but yes your general thinking is correct.

When you have a selector like "a.b" you are essentially saying that you want to target "a" elements that has "b" class.

Whenever you type CSS selectors one after the other without a space you combine them, so "a.b" is just a combination of a regular element selector and an id selector.

When you have a selector like "a b" you are saying that you want to select "b" elements that are within "a", this is an example of a selector called a descendant selector.

There are tons of selector types in CSS, letting you be extremely explicit about what you want to select. You will learn about quite a few of them if you just follow along with the various CSS courses here on Treehouse, there are also articles like this which point out the most common and useful selector types if you are curious about learning them right away.

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

And one last question about 'scope'.

.footer div {
  color: blue;
} 

div.footer {
  color: red;
}

.new-color {
  color: green;
}

<div class="footer">Parent Div
    <div>Child Div1</div>
    <div class="footer">Child Div2</div>
    <div>Child Div3</div>
    <div>Child Div4</div>
    <div class="new-color">Child Div5</div>
</div>

why isn't the class "new-color" being applied? It only works if I remove

.footer div {
  color: blue;
}
andren
andren
28,558 Points

This is because of a concept in CSS called specificity which is a bit complicated to get into.

But basically the problem is that in your example you have two selectors which both target the same element. "Child Div5" has the class new-color, but it is also a div within an element with the class footer so both rules technically apply to it.

Now you might think that since the new-color rule is defined after the ".footer div" rule that should be enough for it to overrule the previous rule. And while it's true that the order CSS rules are written in does play a role, it only does so if the rules have the same specificity.

CSS specificity is again somewhat of a complex subject but essentially the way it works is that the browser looks at what type of selectors are in a rule and assign a score to each of the selectors, the selector with the highest score is the one that wins out.

Id selectors have the highest priority then class selectors then element selectors. Since the ".footer div" rule consists of both a class selector and an element selector. It gets a higher specificity score then the ".new-color" rule since that only contains a class rule.

A useful resource when it comes to specificity is this specificity calculator. On that website you can enter two CSS rules and it will tell you what specificity score those rules will get.

Passing ".footer div" and ".new-color" into that website reveals that the first rule has a score of 11 and the second a score of 10.

Daniel Campbell
Daniel Campbell
10,148 Points
Daniel Campbell
Daniel Campbell
10,148 Points

Perfect, 'specificity' is the word I was looking for (where i used 'scope').

Thank you for the clear response and resource.

andren
andren
28,558 Points

Glad I could be of help.

There is one thing I forgot to mention. When you are testing CSS selectors and trying to see which elements are matched it's best to not change a property which is inherited by child elements. What I mean by this is that some properties (color being one of them) are actually inherited from parent elements if the child element does not have one set explicitly.

So in the example you are using if you had a rule that only targeted the parent div and changed it's color to red and had no rules that touched any of the child divs, then the child divs would still end up with red text. Not because they were targeted by the rule but because they inherited the color property of their parent.

Because of this it's better to use something like border, which is still a pretty easy property to see but is not inherited.