SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    specifity question

    It appears I am in a what is the difference kick lately...

    my latest curiosity is what is the difference between:

    TAG.class

    .class (and inthe HTML < TAG class="class">)

    and in general what is the benefit of putting the selector tag before the class or id? At first I thought this allowed you to set a rule for parent elements.. but that doesn't seem to be the case.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Say you have
    div.content

    It would specify all <div>'s ONLY that have a class of .content

    It carries more specificity. You can not target a parent element from a child in CSS.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    and in general what is the benefit of putting the selector tag before the class or id?
    As Ryan said if you attach the class to a specific html element then you can only use it on that element.

    e.g.

    Code:
    div.test{background:red}
    Code:
    <h1 class="test">This isn't Red </h1>
    <div class="test">This is red </div>
    Only the div will have red text.

    If you had just said:

    .test{color:red}

    Then both elements would be red and the class could be applied to any element.

    The only real benefit to adding the html selector (apart form specificity issues) is that sometimes it aids reading of the stylesheet. I seldom (never) use div.test but I will identify other elements such as ul#nav because that's something I like to know when browsing the stylesheet.

    Most times just simple classes or ids are cleaner (and actually more efficient in browser processing) than long chains of selectors.

    Sometimes you may want to add more weight to a class to over-ride a previous setting and you can do this by adding the selector to it or chainging a longer path (e.g. #outer .inner ul#nav{})

    Theoretically you could use the same class but with different properties depending on the element that is applied to.

    e.g.

    p.warning {color:red}
    h1.warning{background:red;color:white}

    However more often than not that would be likely to confuse you but there is no reason why it could nt be used like that.


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
  •