SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 75

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    could one tag have more than one class ?

    could one tag have more than one class ?

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2007
    Posts
    566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes
    HTML Code:
    <span class="class1 class2 class3"/>

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It is possible yet I do not recommend it.

    For one thing if you try to assign a background image to each class when you set it up like that, only one will be applied making designing layouts particularly hard. I tend to stay away from multiple classes per element as most cases, you only need one class to do the job.

    HTH.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's nothing wrong with multiple classes. You should be careful about combining classes that declare different values for the same CSS property, but even that's manageable if you know what you're doing.

    This contrived example shows a legitimate use for multiple classes:
    Code HTML4Strict:
    <cite class="foreign book novel" lang="fr">Les mots</cite>
    Code CSS:
    .book {font-style:italic}
    .foreign {color:green}
    .novel {font-variant:small-caps}

    If you try to avoid multiple classes you may end up with lots of classes that have many declarations in common, which means many places to update if you want to redesign. For instance, you might need classes like english-book, foreign-book, english-novel, foreign-novel, ...
    Birnam wood is come to Dunsinane

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Which is why I try to stay away from multiple classes: you could just as easily do something like .books instead of a class for each novel/book (as example from above).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You're missing Tommy's point. By having three seperate classes, you can combine them in any way. If you have five different classes which describes different variations of a text, which can occur in any combination and in any number, you would need 21 different classes if you wanted to use only one class per tag (many of which will have redundant information). By having five sub-classes, you only have five.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Precisely. Thank you, Christian!
    Birnam wood is come to Dunsinane

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah true never thought about it that way.

    I guess my designs haven't really required such intense measures for that situation to take place.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You should proceed with caution when using multiple classes. If you don't practice a bit of discretion and know your document multiple classes can lead to many frustrating issues. One in particular that rarely happens with ids if the accidental selection of an element. You really need to know your document and information hierarchy to use them effectively in combination. However, once you do I feel the advantages outweigh the disadvantages and that is why I tend to lean towards a multiple class approach. However, if your just beginning this journey I wouldn't say multiple classes are for the faint of heart. Its quit easy to run into specificity and sort order problems when styling if your using combination selectors. It also increasingly easy to override unintended selectors. I would say this is much more so than just using ids and single classes.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Really no reason to have more then 3. 5 at absolute max.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    That isn't necessarily true.

    Code:
    <div class="gizmo hermit machine cup car house mother">
    
    	<div class="gizmo">
    	</div>
    	
    	<div class="hermit">
    	</div>
    	
    	<div class="machine">
    	</div>
    	
    	<div class="cup">
    	</div>
    	
    	<div class="car">
    	</div>
    	
    	<div class="house">
    	</div>
    	
    	<div class="mother">
    	</div>
    	
    </div>
    Code:
    .gizmo.hermit.machine.cup.car.house.mother {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .gizmo {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .hermit {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .machine {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .cup {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .car {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .house {
    }
    
    .gizmo.hermit.machine.cup.car.house.mother .mother {
    }
    Extreme, but possible.

    Exercising discretion isn't nearly as much about the quantity, as it is the reasoning.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You misunderstood.
    I said you shouldn't NEED it.

    There aren't enough CSS properties to the point where you need a seperate class for each. You can make due with a certain number.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    There aren't enough CSS properties to the point where you need a seperate class for each. You can make due with a certain number.
    huh? CSS properties have nothing to do with it.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    See http://javascript.about.com/library/bldraw1.htm for an example where I have 65 divs each with between 1 & 4 classes assigned to it. If each had to have a single class then the CSS would be at least 10 times longer.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Here is a good article that details the IE6 problem with multiple classes.
    Multiple Classes in IE
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    talking about declaring class and inserting class.

    CSS:

    ul.nobullet {list-style-type:none;} (1)

    .nobullet {list-style-type:none;} (2)


    HTML

    <ul class="nobullet">....</ul>


    either way we have to assign class nobullet to ul tag why would some people use the declaration (1), isnt it making thing more complicated ?

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Why people are more explicit when declaring css selectors is that it helps them to understand what parts of the document are being affected than if there was a seemingly random assortment of just class names.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul we can put

    .ul_nobullet

    @roch

    agree

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by runrunforest View Post
    @Paul we can put

    .ul_nobullet
    And what if someone decides to use <p class="ul_nobullet">?
    Birnam wood is come to Dunsinane

  20. #20
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first, the class say nobullet, not highlight, not empahsize, not font, etc...

    second, wouldn't any one look at the code of the class before they assign it to a tag ?

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may be necessary in order to increase the selector's specificity, to make the declaration override another declaration in another rule that affects the same element(s). For instance, if you had another rule like this,
    Code CSS:
    .section ul {list-style-type:square}
    If your ul with class="nobullet" resides in an element with class="section", your declaration (2) will have no effect, whereas declaration (1) will, provided that the rule appears later in the style sheet.

    Using a type selector instead of an implicit universal selector can also be done to make things clearer, or to avoid having a rule apply where it's not indended to. Imagine the following case,
    Code CSS:
    /* Explicit type selector */
    dl.compact dt {float:left; width:8em}
     
    /* Implicit universal selector */
    .compact dt {float:left; width:8em}

    Then imagine a couple of markup scenarios,
    Code HTML4Strict:
    <!--Case #1-->
    <dl class="compact">...</dl>
     
    <!--Case #2-->
    <div class="compact">
      <dl>...</dl>
    </div>
    The rule with the explicit type selector will only apply for case #1, while the rule with the implicit universal selector will apply in both cases. Sometimes that's what you want, sometimes it isn't.
    Birnam wood is come to Dunsinane

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It may be necessary in order to increase the selector's specificity, to make the declaration override another declaration in another rule that affects the same element(s). For instance, if you had another rule like this,
    Code CSS:
    .section ul {list-style-type:square}

    If your ul with class="nobullet" resides in an element with class="section", your declaration (2) will have no effect, whereas declaration (1) will, provided that the rule appears later in the style sheet.
    Er. For the CSS don't you mean "ul.section"? Because <ul class="section" wouldn't be correct for what you had (or maybe I'm just tired).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Er. For the CSS don't you mean "ul.section"?
    No.

    Let's say you have these CSS rules,
    Code CSS:
    .section ul {list-style-type:square}
    .nobullet {list-style-type:none}

    Then you have this markup,
    Code HTML4Strict:
    <div class="section">
      <ul class="nobullet">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
    Your list items will have square markers, even though the list has class="nobullet". The reason is that the first rule has higher specificity (0,0,1,1) than the second (0,0,1,0).

    In this case you could change the selector in the second rule to ul.nobullet to increase its specificity to 0,0,1,1. Since the second rule comes after the first rule, it will be applied.

    My point was that one reason for including an explicit type selector in this type of rules is to increase the selector's specificity.
    Birnam wood is come to Dunsinane

  24. #24
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whats the differenence between these two ?

    ul.nobullet {...}

    .nobullet ul {...}

    Im confused

  25. #25
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    either way we have to assign class nobullet to ul tag why would some people use the declaration (1), isnt it making thing more complicated ?
    Are you going to add class nobullet to your <p>?

    It's not, its for specificity. Only if it's a ul, then do this. Likewise you can set a different style for the same class because it's on a ol not a ul. There are times to do it, and times not to


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
  •