SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question What does "html>body" mean?

    Without the quotes, that is. I saw this code in Rachel Andrews' excellent 101 Tips, Tricks and Hacks, but I have not seen the "greater than" sign used like that. TIA.

  2. #2
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #a>#b is a child selector. It means execute the following CSS on #b if it's a child of #a. The "html>body" thing is a hack, because IE doesn't support that... so going "html>body #whatever" means IE won't see the CSS.

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! So, really you don't need the > sign? I can write ".nav li {color:#000;}" and it means list items in something with a class of nav have black color text, and there is no > sign. Right?

  4. #4
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, wait, a HACK...so I do need it if IE is the problem, got it. <smackforehead.wav />

  5. #5
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. I'm sure Paul has a technical explanation, but I don't really know the difference between "ul li" and "ul>li", other than the fact that IE doesn't support the latter.

    They're both described at http://www.w3.org/TR/REC-CSS2/selector.html.
    5.5 Descendant selectors

    At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

    5.6 Child selectors

    A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
    I guess child means direct child, as opposed to just under it.


    <div id="a">
    <div id="b">
    <div id="c">
    Hello
    </div>
    </div>
    </div>


    I think "#a #c { color: red; }" will work, but "#a>#c { color: red; }" won't -- #b>#c will.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "ul>li" has a higher specificity than "ul li".

    It's useful for solving some inheritance -- well it would be if IE supported it.
    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.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ul li selects an LI element that has a UL ancestor, i.e. list items even in nested lists.
    ul>li selects an LI element that as a UL parent, i.e. only immediate children of a list.

    HTML Code:
    <ul id="foo">
      <li>Outer</li>
      <li><ul>
            <li>Inner</li>
          </ul></li>
    </ul>
    ul#foo li will match both Outer and Inner.
    ul#foo>li will only match Outer.
    Last edited by AutisticCuckoo; Jul 30, 2005 at 09:04.
    Birnam wood is come to Dunsinane

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought so too -- that's indeed how it would work with an ID or a class...

    My second thought: wouldn't that also get inner since inner is the direct child of a second <ul>?
    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.

  9. #9
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. You'd still need an ID/class of some sort -- unless you use ol in the nested one.

  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)
    That's true. Bad example. ops: I've updated it now.
    (Of course, the rule may still affect Inner due to inheritance, but that's another issue.)
    Birnam wood is come to Dunsinane

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tommy
    That's true. Bad example. ops: I've updated it now.
    Ah - You are human after all Tommy

  12. #12
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks! This is quite an education, which is, after all, what I was looking for.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Ah - You are human after all Tommy
    Nah, not me - I'm an animal!
    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
  •