All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

clarify the id selector

  • # May 27, 2008 at 1:25 am

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


    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?

    # May 27, 2008 at 3:47 am

    This reply has been reported for inappropriate content.

    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:


    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…

    # May 27, 2008 at 9:13 am

    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.

    # May 29, 2008 at 11:08 am

    This reply has been reported for inappropriate content.

    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;}
    This text is 24px

    This text is 18px

    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 {color: red;}
    .section {color: blue;}
    This word is red

    This word is blue

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

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

    This word is blue

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed