Forums

cybershot

I am trying to understand more difficult stylesheets. I have seen selectors that start like this

div#content

why do they put the div there first

I have also seen an id on a li tag where in the css they did this

ul li

I guess what i am trying to get at is if you need to specify the parent tag then go through all the child tags untill you get to the id tag. or is it that if you list the parent and then the children that you are trying to target a specific tag. I tried some experiments but the end result didn't match what I though i would get.

does that make any sense?

Edwin

They two codes you showed are specific codes. You could also just do #content{blabla} but when you say div#content{blabla} you are more specific, what makes the change on mistakes smaller and also (I think very important) it makes your css-file more synoptic. You can directly see what it is about: a div with the id of content. Same story I think for the parent child example, you could also just say li{blabla}, but when you have ul li{blabla} it's way more specific. And in some cases it helps you to use less classes in your xhtml.
For example:


<div id=\"header\">
  <ul>
    <li>home</li>
    <li>about</li>
    <li>contact</li>
  </ul>
</div>

In this case you could give the ul an id or class (for example navigation) and then do ul.navigation{blabla}, but it's not necessery, you can also do div#header ul li {blabla} what does the job. So that's why specific css-codes are way more usefull I think...

koewnet

Also, if you're using div#idnamehere, you raise the ID's specificity by 1. Not much, but sometimes it's good to be sure.

If you want to learn more about CSS specificity, I recommend reading this article and then test out the calculator.

daGUY

It's just a matter of specificity. If you specify the type of element, then those styles will only apply to that element.

This comes in handy for a few reasons. One is that it lets you give different elements different styles while still using the same class name (maybe that name makes the most sense in two different areas of your page). For example:

div.section {font-size: 24px;}
p.section {font-size: 18px;}

<div class=\"section\">This text is 24px</div>
<p class=\"section\">This text is 18px</div>

It also helps you cut down on the number of class names you use. For example, maybe you want all <span>s inside that <div> to have red text, while <span>s inside the <p> have blue. You could do it like this:

.section span.red {color: red;}
.section span.blue {color: blue;}

<div class=\"section\">This word is <span class=\"red\">red</span></div>
<p class=\"section\">This word is <span class=\"blue\">blue</span></div>

But it's cleaner and easier to read this way:

div.section span {color: red;}
p.section span {color: blue;}

<div class=\"section\">This word is <span>red</span></div>
<p class=\"section\">This word is <span>blue</span></div>

treehouse : what would you like to learn today?

Forums

clarify the id selector