Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS identifiers

  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS identifiers

    Hi, is there a benefit to writing code like:
    Code:
    div#wrapper {
    }
    versus

    Code:
    #wrapper {
    }
    Thanks!

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Yes sure there is a difference and/or benefit depending on your need.

    the first rules on;y applies to divs that have their id as wrapper while the second rules applies to any html object that has its id wrapper.
    Software and cathedrals are much the same - first we build them, then we pray.

  • Users who have thanked ckeyrouz for this post:

    flackend (10-20-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks!

    What about id vs class? What is the benefit of using id if you can only use each id once? What justifies the existence of the id parameter other than organization?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    IDs can be used as anchors for internal links:
    Code:
    <a href="#headline">link</a>
    …
    …
    <h2 id="headline">Headline</a>
    and as simple handle for JavaScript/DOM manipulation.

    Also IDs have a higher CSS specificity than classes so when you write
    Code:
    .classname {background-color: red;}
    .classname {background-color: green;}
    the element with the respective class will have a green background while if you have this:
    Code:
    #idname {background-color: red;}
    .classname {background-color: green;}
    the background color will still be red (provided the styles address the same element).

    Have a look at http://htmldog.com/guides/cssadvanced/specificity/ and http://www.smashingmagazine.com/2007...u-should-know/

  • Users who have thanked VIPStephan for this post:

    flackend (10-20-2009)

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

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