none
CSS question on div RRS feed

  • Question

  • Hi folks,

    This is probably a simple questi0on but I can't seem to find an answer. In some css stylesheets is see references such as:

    div#header. I also see references to just #header (not in the same sheet). I am used to the latter format. How is div#header different from #header.

    Still learning here....

    Thanks,

    George

    Thursday, June 10, 2010 2:12 PM

Answers

All replies

  • #header can be applied, one time per page, to any element.  div#header can only be applied to a DIV tag.

    Read the Selector Tutorial here:

    http://css.maxdesign.com.au/selectutorial/


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, June 10, 2010 2:15 PM
  • Specificity

    If you have #header it can be applied to any element such as

    <h1 id="header">whatever</h1>

    While div#header can only be applied to a div and has a higher level of specificity so that any rules that may conflict with another property definition with a lower specificity level will be over ridden.

    Chris's link on to the Selectorial tutorial is a good one but I'll also add one to Molly:
    http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/ 


    MS MVP Expression Tutorials & Help http://by-expression.com
    Thursday, June 10, 2010 4:03 PM
  • Specificity

    If you have #header it can be applied to any element such as

    <h1 id="header">whatever</h1>


    Furthermore, as Cheryl well knows, because for the id="name", the name can only apply to one element on a given page. So, div#header is redundant with #header because you are not allowed to have a h1#header on the same page. Some times I will do this though, just as a documentation boost, so that when reading the CSS it is obvious what kind of element that style is applying to.

    It's different with the class="name" where you can have more than one element on a page have the same class. So you could legitimately have for example:

    div.header{color:#0F0}

    h1.header{color:#F00}

    Generally the "id" is more commonly used for JavaScript automation where the "class" is used for styling.

     

    Thursday, June 10, 2010 5:48 PM
  • "So, div#header is redundant with #header because you are not allowed to have a h1#header on the same page."

    It's not necessarily redundant if it's on a style sheet used by more than one page.  #header should be used only once per page, but it could be applied to different elements on different pages.  In that case, #header styling applies to all of them, but any additional (or overriding) styling in div#header applies only if it's a div.

     

    "Generally the "id" is more commonly used for JavaScript automation where the "class" is used for styling."

    Hardly.  Lots of us don't use javascript, but we still use id's on things like headers, footers, etc. that are one-per page.

    Thursday, June 10, 2010 5:57 PM
  • Adding.  I had just read that its recommended to use #header instead of div#header as its more efficient in the processing.  Can't find the article but it was on one of the well-respected design blogs.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, June 10, 2010 5:59 PM
  • "I had just read that its recommended to use #header instead of div#header as its more efficient in the processing."

    Assuming you don't need the specificity, of course, that is, there isn't any div-specific styling you want to use that you would not use if the id were applied to something other than a div.

    Thursday, June 10, 2010 6:25 PM
  • Come on Kathy.  You really think I don't know that if I wanted to apply div#header to something other than a div it wouldn't work...

    I was referring to the internal processing a browser goes through when rendering a page.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, June 10, 2010 6:28 PM
  • Hardly.  Lots of us don't use javascript, but we still use id's on things like headers, footers, etc. that are one-per page.

    As far as styling goes there is nothing that says that you can't use a class even if there is only one per page. For styling, the id offers nothing that a class can't do. With JavaScript you are often stuck using the id because there is a getElementById() function and there is no native getElementByClass() function.

     

    http://www.1keydata.com/css-tutorial/class-id.php

    Quoted from that link:

     

    Class vs ID

    The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document. The second difference is that ID can be called by Javascript's getElementByID function.

    There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.

    Thursday, June 10, 2010 7:18 PM
  • That 1keydata link is just that person's suggestion, one that has no particular benefit.  What flexibility is needed when you are styling something that you know is once per page? I'll add that there are specificity benefits to using an id, but if you are not using complex CSS it might not come up.
    Thursday, June 10, 2010 7:44 PM
  • With JavaScript you are often stuck using the id because there is a getElementById() function and there is no native getElementByClass() function.
    Unless of course you use jQuery which makes it trivial to access an element by its class or attribute.  I know you're taking about a purist approach to JS.  I personally like using jQuery framework - let it do the heavy lifting for me.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, June 10, 2010 8:03 PM
  • Furthermore, as Cheryl well knows, because for the id="name", the name can only apply to one element on a given page. So, div#header is redundant with #header because you are not allowed to have a h1#header on the same page. Some times I will do this though, just as a documentation boost, so that when reading the CSS it is obvious what kind of element that style is applying to.

    It's different with the class="name" where you can have more than one element on a page have the same class. So you could legitimately have for example:

    div.header{color:#0F0}

    h1.header{color:#F00}

    Generally the "id" is more commonly used for JavaScript automation where the "class" is used for styling.

    Since Chris had already covered the "only use once on the page" and I referenced his post there didn't seem a reason to be redundant.

    As for IDs it is equally common to use them instead of classes for section divisions so I would use id for container, header/masthead, col, col1, menu/nav, footer because I do not want them to be used more than once on the page.


    MS MVP Expression Tutorials & Help http://by-expression.com
    Thursday, June 10, 2010 8:41 PM
  • JQuery can produce a synthetic getElements ByClass() equivalent but it can not do a getElementByClass(). Yes, I love using jQuery.
    Thursday, June 10, 2010 9:30 PM
  • Thanks to all of you; I have learned something new.

    George

    Friday, June 11, 2010 5:17 PM
  • For styling, the id offers nothing that a class can't do.

    Correct, but for styling there is one very good reason not to use ids at all - CSS specificity. I'm sure the CSS gurus had some reason for giving ids higher weight than classes but it's beyond me. (For a really, really good tutorial on CSS specificity, see Chris Coyier's CSS-Tricks article.)

    This was one of the "learning CSS" humps I had to get over and it was the one that had me banging my head against the wall because I drank the "ids one, classes many" Kool-Aid. I solved the problem easily - no ids in style sheets except in very special cases. Getting rid of ids in the style hierarchy has been a boon to me. 

    With JavaScript you are often stuck using the id because there is a getElementById() function and there is no native getElementByClass() function.

    That's exactly why I use jQuery.

    And just to be clear, I still use ids. I just don't define styles against them.


    Will
    Baltimore, MD USA - www.fastie.com
    Saturday, June 12, 2010 11:30 AM
  • Will,

    I guess we'll have to agree to differ because I appreciate the higher specificity of IDs and use them in part for that reason.


    MS MVP Expression Tutorials & Help http://by-expression.com
    Saturday, June 12, 2010 3:23 PM
  • "Correct, but for styling there is one very good reason not to use ids at all - CSS specificity. "

    That's a very strange statement.  That difference is a reason to use them, not a reason not to use them.  It gives you an additional tool.  Of course, it assumes you understand specificity and are using it deliberately.

    Saturday, June 12, 2010 3:35 PM
  • Cheryl, Kathy:

    Points taken, both.

    Call it my weakness or my laziness or both. All I know is that once I discovered CSS specificity and decided not to style against IDs, The amount of CSS I used went down and I had a better personal grasp of the cascade.

    The main thing I could not get over was the fact that I could apply a class to an element inside another element identified with an id and the outer element's style would override the inner element's style. I thought the whole point of the cascade was that the closer a style was to an element, the more effect it had. The higher score for ids broke that.

    This led to my having entire subsets of CSS, often duplicated, to handle formatting in a different containing elements. I finally realized how stupid that was, but I did not know how to get around it. Dropping ids altogether did solve it.

    There is probably something I don't understand about the design of specificity. However, I do understand one case, components, where the goal is to make sure that the CSS is contained and that it is not possible for any class to interfere with the formatting. Without something like that, components would be much more difficult.

    But for routine construction of sites, I no longer use ID-based styles and I'm living a happier technical life.


    Will
    Baltimore, MD USA - www.fastie.com
    Saturday, June 12, 2010 7:28 PM
  • I agree with Will on this. Furthermore, I have been moving incrementally away from even declaring a class in elements and have been using CSS selectors more and more. It's amazing how specific you can get with selectors leaving the structure even cleaner reading not having class="blah blah" every where.
    Saturday, June 12, 2010 7:51 PM
  • I'm not a fan of a bunch of classes which is why I tend to use IDs and take advantage of inheritance using html elements as selectors.

    #masthead
    #masthead a
    #menu ul, #menu li
    #menu a
    #content
    #content h2

    And so forth I tend to use very few classes.


    MS MVP Expression Tutorials & Help http://by-expression.com
    Saturday, June 12, 2010 8:13 PM
  • I'm not a fan of a bunch of classes which is why I tend to use IDs and take advantage of inheritance using html elements as selectors.

    #masthead
    #masthead a
    #menu ul, #menu li
    #menu a
    #content
    #content h2

    And so forth I tend to use very few classes.


    MS MVP Expression Tutorials & Help http://by-expression.com


    Why wouldn't the following work exactly the same as using ID's?

    .masthead
    .masthead a
    .menu ul, .menu li
    .menu a
    .content
    .content h2

     

    When I was speaking of using selectors I was thinking of something like:

     

    h1 + div > span{color:green}

    h2 + div span:first-child {font-weight:bold}

     

    Which doesn't require the use an ID or a Class.

    Saturday, June 12, 2010 9:09 PM
  • Here is yet another perspective: http://ryanfait.com/articles/the-difference-between-ids-and-classes/

    When to Use One or the Other

    The vast majority of CSS coders use ID's for any elements that are simply used once on a page. However, I only use classes to style my websites, but, when I want to use an element in JavaScript, I use an identifier. From a presentational standpoint, styling elements with classes looks exactly the same as styling them with ID's, but the flexibility of classes offers a certain appeal even if I don't plan on using a class more than once on a page. Also, when I see an ID in my XHTML, it reminds me that there is some JavaScript that refers to that element.

    Saturday, June 12, 2010 10:47 PM
  • #masthead has a higher specificity than .masthead. I prefer the enforced discipline of only using something once on a page.

    I haven't completely dropped IE 6 support and it doesn't support ">"

    IE 7 & below have problems with "+", :before, :after, :first-child, and :focus. See: http://www.quirksmode.org/css/contents.html 


    MS MVP Expression Tutorials & Help http://by-expression.com
    Saturday, June 12, 2010 10:49 PM
  • The problems that IE7 has with those is only upon adding elements dynamically in front of your styled element and you know if your doing that or not. With IE6, if the page is unstyled but still readable I'll go with it.  If the IE6 rendering gets dysfunctional then I'll do the usual thing with classes.

    Sometimes, if you have a PHP application like a message board, database editor app, or CMS,  you might find yourself wanting to style something after the PHP processor has done it's work and it didn't give you a class or an ID to work with. If you only can play with the style sheet, in those cases the pure selector stuff + > first-child can really help. But like you said, IE6 sucks.

    Sunday, June 13, 2010 1:05 AM
  • ...and it didn't give you a class or an ID to work with.


    Yes, that's a good point. When you are using components for which you don't control the source code and want to be able to drop in updates without breaking things, writing "outer" CSS is handy.

    However, those are the kinds of components I speak of above. For example, I use Shadowbox-js. It uses a series of CSS selectors beginning with #sb- and it is thus possible to override in a subsequent CSS declaration. With earlier versions of Shadowbox I modified #sb-body to fix a bug. Shadowbox might not be the best example; I would prefer to see a single, containing selector (e.g., #shadobox-js) that was the ancestor of all the other definitions. That is the true value of id-based CSS selectors - they can be highly selective because of that annoying specificity.


    Will
    Baltimore, MD USA - www.fastie.com
    Sunday, June 13, 2010 2:43 PM