Grow your CSS skills. Land your dream job.

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

    Code:
    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

    Code:
    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

    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:

    Code:

    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

    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:

    Code:
    div.section {font-size: 24px;}
    p.section {font-size: 18px;}
    Code:
    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:

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

    This word is blue

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

    Code:
    div.section span {color: red;}
    p.section span {color: blue;}
    Code:
    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.

*May or may not contain any actual "CSS" or "Tricks".