SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confused about descendant selectors

    I'm a bit confused about decendant selectors. I'm going through Eric Meyer on CSS...

    What's the difference between:

    "tr td#crumbs" and just "td#crumbs" (without the 'tr')???

    Surely there's no need for the tr as any td will be following a tr. I could see if it was td p#crumbs as there might be other p tags that this won't affect...

    Thanks to anyone who can help!

    Chris

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just drop tables and you wont need to worry about it.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  3. #3
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done some experimenting in the past with <tr> and I believe you are correct. When styling tables I stick with styling the table and td.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol. I'm not going to have tables in my website but I'm going through the first example in Eric Meyer's book where he makes over an existing website that has lots of tables in it.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tigermoth
    What's the difference between:

    "tr td#crumbs" and just "td#crumbs" (without the 'tr')???
    With this code:

    Code:
    tr td#crumbs { color: red }
    td#crumbs { color: blue }
    The text will be red. The tr adds extra precision, so will make the rule more important. As it is an id tag, this code should work exactly the same too:

    Code:
    #crumbs { color: green }
    Douglas
    Hello World

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tigermoth
    lol. I'm not going to have tables in my website but I'm going through the first example in Eric Meyer's book where he makes over an existing website that has lots of tables in it.

    Yeah, I tried reading the book too and just had a hard time with all the table tags and stuff, so I just use it for reference now cause I try to not use tables as much as possible.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by meltingInPhoenix
    I've done some experimenting in the past with <tr> and I believe you are correct. When styling tables I stick with styling the table and td.
    Thanks for the replies. I'm not sure but I don't think that "tr td#crumbs" is styling the <tr> tag. It would be used like this:

    <table>
    <tr>
    <td id="crumbs">Blah Blah Blah</td>
    </tr>
    </table>

    I can't see a reason why you would use the tr at the start. That said, I'm not 100% sure why you would use td#crumbs instead of just #crumbs...

    I think I'd better go to bed!

  8. #8
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case it doesn't make much of a difference, short of what Doug said about precision. It DOES, however, make a difference for:

    Code:
     <ul>
        <li>A</li>
        <li>B</li>
     </ul>
     <ol>
        <li>C</li>
        <li>D</li>
     </ol>
    In which case, you need "ol li" and "ul li". Otherwise you apply the style for both.

    And yeah, I just sue #crumbs. Not tr td#crumbs. It doesn't matter for IDs. Tags/classes are different since they can be used all over the place.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID's would matter if your CSS was in an external stylesheet and yuo used the same ID on different pages with different containers.

    Read the CSS Specification on this.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 'tr' adds specificity.
    Code:
    tr td#crumbs
    is more specific than
    Code:
    td#crumbs
    which is more specific than
    Code:
    #crumbs
    which is more specific than
    Code:
    td
    Specificity is important in the cascade, because it decides which rule will 'win' when there are multiple conflicting rules that apply to the same element.
    Birnam wood is come to Dunsinane


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
  •