SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Can I have ID and Class in the Same Element?

    Is it possible to have one ID plus one or more Classes in the same element?

    For example...
    Code:
    <!-- Upcoming Events -->
    	<div id="events" class="box highlightBox">
    		<h2 class="headerBar">Upcoming Events</h2>
    		<p>Lorem ipsum dolor sit amet...</p>
    	</div>

    The reason I want to do this is that I would like all "boxes" to be driven off the same Class(es), but also have a way to *uniquely* identify and style a particular "box".

    Thanks,


    Debbie

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is it possible to have one ID plus one or more Classes in the same element?
    Did it work when you tried it?

    Code CSS:
    <style type="text/css">
                #events {
                    border: 1px solid red;
                }
                .box {
                    background-color: burlywood
                }
                .highlightBox {
                    color: green;
                }
            </style>

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw - yes

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    Did it work when you tried it?
    Doesn't matter if it worked for me.

    The questions always is, "Can you legitimately do it for all browsers or will it blow something up?!"

    I found an article in 2004 that says, "Yes, you can do it."

    But would you want to and what are the consequences?!


    Debbie

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    "Can you legitimately do it for all browsers or will it blow something up?!"
    Now you're changing the scope of your original question - seems like you are making things up as you go along again .

    When you say "all" browsers, are you aware of how many browsers there are out there in existence?

    Why not specify the browsers and their versions you want to support?

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Another obvious questions is, "Is having both an ID and a Class in an Element more help or harm from a maintenance standpoint?"

    Here is a simple example that demonstrates this...

    Scenario #1: Using IDs + 1 Class
    Code:
    .box{
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    
    #boxFeatured{
    	font-size: 1em;
    }
    #boxEvents{
    	font-size: 2em;	
    }
    #boxFactoids{
    	font-size: 3em;
    }
    #boxTip{
    	font-size: 4em;
    }

    Scenario #2: Folding things Separate ID's only
    Code:
    #boxFeatured{
    	font-size: 1em;
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    #boxEvents{
    	font-size: 2em;	
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    #boxFactoids{
    	font-size: 3em;
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    #boxTip{
    	font-size: 4em;
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }

    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    Now you're changing the scope of your original question - seems like you are making things up as you go along again .

    When you say "all" browsers, are you aware of how many browsers there are out there in existence?

    Why not specify the browsers and their versions you want to support?
    You know what I mean...

    "If I have both an ID and a Class(es) in an Element, will it be supported by all modern browsers and any that most people would care about?"

    If your "Yes" only works in FireFox 8 then that probably isn't good enough.

    If it doesn't work in IE 5.5 then I'll get over it...


    Debbie

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Another obvious questions is, "Is having both an ID and a Class in an Element more help or harm from a maintenance standpoint?"
    There is no "one size fits all" answer to your question. It boils down to personal preference if something can be done in more than one way.

    For me, the less code I use to perform the task, the easier it is for me to maintain it.

  9. #9
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    You know what I mean...
    No I don't

    "all" means each and everyone. That's why I asked you to list the browsers and their versions you want to support.

    I can only go by what you actually say. I'm not going to waste time trying to guess what you really want to know. If you ask the wrong questions, you increase the probability of not getting the answers you need.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ok. SIMPLE ANSWER ( ass simple as possible, anyway):

    YES, you can . No it won't "blow anything up" but your mileage will vary. Still support for elements with both class (singular) and ID is nearly universal.

    You will need to keep specificity in mind EVEN MORE. And older -Older -OLDER versions of IE do not like chaining ( the very handy technique of , well, chaining : #myID.myclass { color: red} for example ; but those versions also didn't like chaining classes either....)

    Another reason why you dont even have to WORRY about having both a class and an ID is that sometimes an ID is NECESSARY for non CSS stuff ( for example, in .js getElmentByID()), consequently it would have put quite a downer on at least two technologies fr this not to be possible.


    Hope that has cleared your doubts, DD.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Ok. SIMPLE ANSWER ( ass simple as possible, anyway):
    Watch your a s s, there, Dresden!


    YES, you can . No it won't "blow anything up" but your mileage will vary. Still support for elements with both class (singular) and ID is nearly universal.

    You will need to keep specificity in mind EVEN MORE. And older -Older -OLDER versions of IE do not like chaining ( the very handy technique of , well, chaining : #myID.myclass { color: red} for example ; but those versions also didn't like chaining classes either....)

    Another reason why you dont even have to WORRY about having both a class and an ID is that sometimes an ID is NECESSARY for non CSS stuff ( for example, in .js getElmentByID()), consequently it would have put quite a downer on at least two technologies fr this not to be possible.


    Hope that has cleared your doubts, DD.
    So technically it'll work. Okay.

    But would I want to go down that path?

    Here is what I was thinking - if I didn't explain before...

    I have a generic class called...
    Code:
    .box{
    	margin: 20px 0;
    	padding: 1em;
    	border: 1px solid #AAA;
    }

    And then I have specific instances of "boxes" that require further styling, like...
    Code:
    #boxTip{
    	padding: 2em;
    	color: #F00;
    }
    
    #boxFeatured{
    	text-align: left;
    }
    
    #boxEvents{
    	background-color: #FFC;
    }

    If I ever decided a "box" should have a 2px Blue border, I'd only have to change my code in ONE PLACE versus possibly dozens of ID's in the old way.

    Comments or suggestions from the peanut gallery?


    Debbie

  12. #12
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    If I ever decided a "box" should have a 2px Blue border, I'd only have to change my code in ONE PLACE versus possibly dozens of ID's in the old way.
    The less code I have to perform a task results in fewer places amendments have to be made and so for me, the easier it is to maintain the code.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The only issue would be one of specificity in that the ids carry more weight and will win out against any rules that the class holds. However that would seem to be what you want in most cases as you would be using the id to over-ride the class anyway.

    There is no problem with having classes and ids on the same element but as mentioned above IE6 doesn't like the dot notation method of specifying them but you aren't using that method anyway (e.g. id.classname {}).

    I tend to use ids for the major structural elements of the site (#header, #footer, #content, #sidebar, #navigation etc) and the just use classes for everything else unless. In the end it doesn't really matter but specificity will catch you out if you are not careful.

    A lot of people do things like this:
    #content p {color:red}

    and then add a class to the p element and say:

    p.highlight {color:blue}

    Then they wonder why the p element is still red.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Reading this thread... Wow, and people call me an ass...

    It's in the HTML spec that you can have as many classes as you like on an element. As class and ID are separate attributes, they do not interfere with each-other EXCEPT:

    It's in the CSS spec that anything declared in an ID trumps a class -- so obviously you can combine them... but beware if you try to set a value with a class that's already decalred in the ID, it won't take.

    Also be aware that certain combinations CSS side of classes...

    #boxFeatured.box (notice the lack of space between them -- means both must be present on the element) will not work in certain older versions of IE and FF. (in FF it's usually a regression error).

    It's how the {massive string of expletives omitted} over at turdpress can vomit up idiotic code like this:
    <li id="menu-item-781" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-781">

    Which just makes me want to backhand somebody...

    All that taken into consideration, bloating out the uncached markup instead of the CSS is not a great approach to coding from an efficiency or bandwidth standpoint. To do what your saying, I'd be going:

    Code:
    #boxFeatured,
    #boxEvents,
    #boxFactoids,
    #boxTip {
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    
    #boxEvents {
    	font-size: 2em;	
    }
    
    #boxFactoids {
    	font-size: 3em;
    }
    
    #boxTip {
    	font-size: 4em;
    }
    That way you aren't blowing bandwidth by saying class="box" on every single one of them in the markup. Ends up about the same amount of code in the long run, but uses less bandwidth if this CSS is being used on more than one page. Your second example would end up thus:

    Code:
    #boxTip,
    #boxFeatured,
    #boxEvents {
    	margin:20px 0;
    	padding:1em;
    	border:1px solid #AAA;
    }
    
    #boxTip {
    	padding:2em;
    	color:#F00;
    }
    
    #boxFeatured{
    	text-align:left;
    }
    
    #boxEvents{
    	background:#FFC;
    }
    Always remember the reasons to use CSS in the first place -- simpler HTML, semantic HTML, reduction of bandwidth by caching appearance across pages, speeding subsequent page-loads by pre-caching appearance, and ability to restyle the page without major (or if well crafted... any) changes to the markup.

    Off Topic:

    (which is why I still say the STYLE tag should be deprecated, and the STYLE attribute should only be used when the style adds meaning to the content - which is a REALLY rare occurrence; if you aren't putting it in an external file, 90% of those reasons to use CSS don't work)


    side note, also remember the rule, change the font-size, change the line-height
    ... and there's no reason to ever say font-size:1em unless you're overriding a previous declaration

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No foaming so far today, DeathShadow?!


    Quote Originally Posted by deathshadow60 View Post
    Reading this thread... Wow, and people call me an ass...
    Dresden just can't type, but you burn entire villages down - for no apparent reason - on some days...


    (That'd make a *sweet* Sig Line...)



    It's in the HTML spec that you can have as many classes as you like on an element. As class and ID are separate attributes, they do not interfere with each-other EXCEPT:

    It's in the CSS spec that anything declared in an ID trumps a class -- so obviously you can combine them... but beware if you try to set a value with a class that's already decalred in the ID, it won't take.
    Right.


    Also be aware that certain combinations CSS side of classes...

    #boxFeatured.box (notice the lack of space between them -- means both must be present on the element) will not work in certain older versions of IE and FF. (in FF it's usually a regression error).
    I was going to use them separately, but I follow you.


    It's how the {massive string of expletives omitted} over at turdpress can vomit up idiotic code like this:
    <li id="menu-item-781" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-781">

    Which just makes me want to backhand somebody...
    True.


    All that taken into consideration, bloating out the uncached markup instead of the CSS is not a great approach to coding from an efficiency or bandwidth standpoint.
    Okay.


    To do what your saying
    DeathShadow made the "YOUR" mistake?! (Must be a post-Thanksgiving cold!)


    I'd be going:

    Code:
    #boxFeatured,
    #boxEvents,
    #boxFactoids,
    #boxTip {
    	margin: 20px 0;
    	border: 1px solid #AAA;
    }
    
    #boxEvents {
    	font-size: 2em;	
    }
    
    #boxFactoids {
    	font-size: 3em;
    }
    
    #boxTip {
    	font-size: 4em;
    }
    That way you aren't blowing bandwidth by saying class="box" on every single one of them in the markup. Ends up about the same amount of code in the long run, but uses less bandwidth if this CSS is being used on more than one page.
    I was thinking about that approach last night as well.

    I suppose it still accomplishes my "Write once, re-use many times", except if you had 100 different "boxes" that would get sorta unwieldy...

    I guess your key point is to "Leave the HTML alone!" (or as simple as possible).


    Always remember the reasons to use CSS in the first place -- simpler HTML, semantic HTML, reduction of bandwidth by caching appearance across pages, speeding subsequent page-loads by pre-caching appearance, and ability to restyle the page without major (or if well crafted... any) changes to the markup.
    Fair enough.

    But then what do you think about this thread of mine...
    Seeking Polymorphic CSS Class


    I'm not trying to go WordPress on anyone, but I am trying to simplify my code and make things more manageable.



    side note, there's no reason to ever say font-size:1em unless you're overriding a previous declaration
    That was just a silly example.


    Debbie

  16. #16
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    It's in the HTML spec that you can have as many classes as you like on an element.
    So what if it's in the spec's?

    If you look at post 4 you will see the op was really concerned about it's browser support.

    There are lots of things in the specs that browsers support to varying degrees and some better than others

  17. #17
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60
    Reading this thread... Wow, and people call me an ass...
    To be fair your a different type of @ss.
    The only code I hate more than my own is everyone else's.

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    There are lots of things in the specs that browsers support to varying degrees and some better than others
    ...and multiclassing isn't one of them!

  19. #19
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ...and multiclassing isn't one of them!
    so nothing's changed

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by DoubleDee View Post
    DeathShadow made the "YOUR" mistake?! (Must be a post-Thanksgiving cold!)
    Worse, I'm on the laptop, can't type worth a Confederate dollar on these things... again, I'd love to have a laptop with a Model M inside it. I'd settle for a modernized lunchbox.


    Quote Originally Posted by DoubleDee View Post
    I suppose it still accomplishes my "Write once, re-use many times", except if you had 100 different "boxes" that would get sorta unwieldy...
    You have more than ten different "boxes" there's something wrong structurally or the design is absurdly inconsistent... or it's knee deep in "too many nested DIV". IF it were to reach that point for a legitimate reason (hard to think of one) that's when I'd be considering adding the class...

    Quote Originally Posted by DoubleDee View Post
    I guess your key point is to "Leave the HTML alone!" (or as simple as possible).
    EXACTLY!

    Quote Originally Posted by DoubleDee View Post
    But then what do you think about this thread of mine...
    Seeking Polymorphic CSS Class
    I'm not sure what polymorphism has to do with it; though I've begun to suspect that said word is being used much akin to 'web 2.0' so far as marketspeak goes. It would be a very proactive paradigm. (6 minute mark)

    I've re-read that thread three times now, and I'm having trouble deciphering the question or point of it... as opposed to this thread... Same question isn't it?

    Quote Originally Posted by DoubleDee View Post
    That was just a silly example.
    I know, hence the smiley...

  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Off Topic:



    Worse, I'm on the laptop, can't type worth a Confederate dollar on these things... again, I'd love to have a laptop with a Model M inside it. I'd settle for a modernized lunchbox.
    Face it... You're "human" too. Hey, it'll be "our" little secret... *Wink wink... Nudge nudge*


    You have more than ten different "boxes" there's something wrong structurally or the design is absurdly inconsistent... or it's knee deep in "too many nested DIV". IF it were to reach that point for a legitimate reason (hard to think of one) that's when I'd be considering adding the class...
    Maybe, maybe not.

    In an ideal world, everything on every website out there would be distilled down into a page of CSS styles. Then again, life and the Internet would be pretty boring if the world was that one-dimensional...

    The idea of my "boxes" is to provide a consistent "container" to disparate information, but that doesn't mean that content will fit into one of 10 "flavors"...

    Won't know until I get there. I strive for consistency, but I can think of lots of different ways to display my "widgets"...


    Quote Originally Posted by DoubleDee
    I guess your key point is to "Leave the HTML alone!" (or as simple as possible).
    EXACTLY!
    So I'll shoot for that for now.


    I'm not sure what polymorphism has to do with it; though I've begun to suspect that said word is being used much akin to 'web 2.0' so far as marketspeak goes. It would be a very proactive paradigm. (6 minute mark)

    I've re-read that thread three times now, and I'm having trouble deciphering the question or point of it... as opposed to this thread... Same question isn't it?
    "polymorphism in the context of object-oriented programming, is the ability to create a variable, a function, or an object that has more than one form. The word derives from the Greek "πολυμορφισμός" meaning "having multiple forms". In principle, polymorphism can however arise in other computing contexts and it shares important similarities to the concept of degeneracy in biology."

    http://en.wikipedia.org/wiki/Polymor...ed_programming


    I mentioned the term "polymorphism" loosely because if I create a base "box" and then I customize it using Classes then that base "box" becomes "polymorphic" in essence...



    Debbie

  22. #22
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    The questions always is, "Can you legitimately do it for all browsers or will it blow something up?!"
    Then don't just try it in one browser, try it with the W3 validator. If that gives you a big green tick then all is well with the world and your code.

    I found an article in 2004 that says, "Yes, you can do it."
    Code that was valid in 2004 hasn't become invalid in the meantime.

    But would you want to and what are the consequences?!
    As others have said, it works absolutely fine (as long as you don't try chaining and you get your specificities right), and the consequence is that it gives you a much simpler and more straightforward code both in the HTML and the CSS.

    Remember that the ID could equally well be used as an internal link point or Javascript reference not being able to put a class (for styling) on the element would become unworkably restrictive.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •