SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Differences in styling elements

    I am curious about the differences between the following two methods for styling an element like an unordered list

    Method 1.
    #div_name ul {}

    Method 2.
    ul.div_name {}

    Thanks.

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    as far as i know, "." is to define a class, "#" is to define an ID

  3. #3
    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 katmarsar View Post
    I am curious about the differences between the following two methods for styling an element like an unordered list

    Method 1.
    #div_name ul {}

    Method 2.
    ul.div_name {}
    Method 1 works for a <ul> that is inside some other element with id="div_name".

    Method 2 works for <ul class="div_name">

  4. #4
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, which should make Method 2

    <ul class="ul_class_name"> and

    ul.ul_class_name {}

    There's also
    ul#div_name {} which would select for a <ul id="div_name">

  5. #5
    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)
    it's a little more involved that that, but only a little.

    #div_name ul {}
    would target a child of the id "div_name"
    so it would look like this:

    <div id="div_name">
    <ul>... </ul>
    </div>


    Method 2.
    ul.div_name {}
    would target ONLY ULs that have the CLASS "div_name"

    <ul>...</ul> <!-- would not be targeted-->
    <ul class="x">...</ul> <!-- would not be targeted-->
    <DIV class="div_name">...</ul> <!-- would not be targeted-->
    <ul class="div_name">...</ul> <!-- would be targeted-->

    in the example above, if you have merely used .div_name{} then you your rules would have applied to the div as well ( along with any other tags that had the class "div_name").

    you could have this as well, ul#div_name{} and the same principle as above would apply.. only to classes instead of divs. It works and it is totally val;id, but leaves the question of WHY!?!?!? as an ID is unique on a page so you SHOULDN'T have to be worrying that you may have a <div id="div_name"> and a <UL id="div_name">. so the occasions in which it would make sense to have something like ul#div_name{} are quite rare.

  6. #6
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was assuming that div_name was just a generic name the OP gave, and not actually the name given to a div.

  7. #7
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Btw, dresden_phoenix, jim butcher fan?


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
  •