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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts

    Basic CSS questions, when to use # and .

    Hi,

    For example, say you have: #right vs .right, what is the difference? I just use dot for everything and it seems to work, but I don't think thats correct.

    It would be great if someone could explain to me in detail what is the difference, thanks.

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    # referes to an ID,
    where . refers to a class.

    Understanding specificity might help you grasp the differance some, but really I'd say this is more of a markup question than a CSS one.

    Do you understand when you should use id's vs. classes?
    The # and . are just ways of targeting elements based on those properties.

    Remember, and ID can only occur once on the page.
    That is to say <img id="entry1" /> can be the only id="entry1", whereas <img class="detail" /> could be one of many class="details".
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Quote Originally Posted by zro@rtv View Post
    # referes to an ID,
    where . refers to a class.

    Understanding specificity might help you grasp the differance some, but really I'd say this is more of a markup question than a CSS one.

    Do you understand when you should use id's vs. classes?
    The # and . are just ways of targeting elements based on those properties.

    Remember, and ID can only occur once on the page.
    That is to say <img id="entry1" /> can be the only id="entry1", whereas <img class="detail" /> could be one of many class="details".
    now you can use a different id name in a page right?

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You can set as many different ids on a page as you like and add a different style (#) to all of them.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    Yea, I understand that # refers to an ID and . refers to a class, but can anyone give me some practical examples when # would be used. If I have a header, content and footer wrapped within a container and I only use them once on each page am I supposed to call them #container, #header, and so on? I use . and have no problems...

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    to me its easier to call a class on a specific area, and an id on a whole area. Like a list would be wrapped in an id, and maybe every two <li> i would place a class for maybe a different color. Does that help any?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You can have a value of id (say id="header") only once in a document (something like an identity).

    But class refers to a collections of elements (more than one in general), so you can have the same value (say class="tiny_link") for many elements in a document.
    These two links may help to clear them!
    http://www.tizag.com/cssT/cssid.php
    http://www.tizag.com/cssT/class.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jcdevelopment View Post
    to me its easier to call a class on a specific area, and an id on a whole area. Like a list would be wrapped in an id, and maybe every two <li> i would place a class for maybe a different color. Does that help any?
    How about this.

    http://css-discuss.incutio.com/?page=ClassesVsIds

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, quick question. I have noticed (i still consider myself a novice) that in some style sheets they use something like this:

    #someid.style a {some css}

    now what exactly does this do?

  • #10
    Regular Coder
    Join Date
    May 2006
    Location
    Wales
    Posts
    820
    Thanks
    1
    Thanked 82 Times in 79 Posts
    Code:
    #someid.style a
    This refers to <a> tags inside the tag with #someid as the ID and .style as the class.


    From zro@rtv's link:
    Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

    The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.

    * p has a specificity of 1 (1 HTML selector)
    * div p has a specificity of 2 (2 HTML selectors; 1+1)
    * .tree has a specificity of 10 (1 class selector)
    * div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
    * #baobab has a specificity of 100 (1 id selector)
    * body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

    So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.
    Last edited by Mwnciau; 10-31-2007 at 05:10 PM.

  • #11
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, so it basically overwrites a specific tag! So when u have p set in a div you can overwrite that by a more exact code?

  • #12
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    That's exactly right.

    Consider this CSS:
    Code:
    p { 
      font-size: 1em; 
      line-height: 1.5em;
      color: black;
      }
    #content p {
      color: red;
      }
    And the code:
    Code:
    <p>This is not red</p>
    <div id="content">
      <ul>
        <li><p>This is red</p></li>
      </ul>
    </div>
    In the above HTML the second p gets colored red. That's because a more specific rule (the second rule) applied to that element.

    Specificity and the cascade are really the two powers of CSS. It allows you to 1.) single out very specific tags on the page and only apply styling to them as well as 2.) override styles through specificity so that you don't always have to modify previous rules.

  • #13
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • #14
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    The first thing you must understand is that web browsers give more wait to ID selectors then classes. For example if your stylsheet specifies two different styles (one usind ID and the other using CLass) that represent the same tag. The ID style will wins and your item will take the style of the ID selector!

    This leads me to my next point. When you are identifying sections of the page that only occur once yous the ID selector. examples are your header, sidebar, footer, ext... A good reason for this is that since ID's have more weight it makes sense to make them identify sections as this will guarantee that you avoid style conflicts.

    When you are using a style several items the same one page you use the class (.) selector. For example if you have multiple paragraphs on a page that you want styled the same you can assign them all the same class to style them.

  • #15
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    for illustration heres a little example that I think may lead to more understanding:

    Code:
    <div id="primary" class="column">
      lorem ipsum dollar sit...
    </div>
    
    <div id="secondary" class="column">
      lorem ipsum dollar sit...
    </div>
    Code:
    .column{
    float:left;
    margin-right:10px;
    }
    
    #primary{width:600px;}
    #secondary{width:200px;}

    Other Things to Note
    Also i think it might be worth noting 2 things after reviewing some of the responses here.

    First: when implementing classes and ID's remember to describe what the elements ARE not what they should look like. Using classes like <a class="red_link" href="http://google.com">Google</a> is hardly any better than just using inline styles or the dreaded font tag. Instead something like <a class="external" href="http://google.com">Google</a> or something relatively semantic.

    Second: Classes and ID's are NOT the only way to specify elements. You can refer to element s by their tag. Often classes will be unnecessary if you look at it.


    Example of the BAD:
    Code:
    <ul id="movies_list">
       <li class="movie">Rosmary's Baby</li>
       <li class="movie">The Brood</li>
       <li class="movie">Hour of the Wolf</li>
       <li class="movie">Jacob's Ladder</li>
    </ul>
    Those classes are pretty unnecessary... the instead:
    Code:
    <ul id="movies_list">
       <li>Rosmary's Baby</li>
       <li>The Brood</li>
       <li>Hour of the Wolf</li>
       <li>Jacob's Ladder</li>
    </ul>
    is just as good and the css to target the li's would be:

    Code:
    ul#movies li{color:#911;}
    or similar... perhaps this helps insight?
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999


  •  

    Posting Permissions

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