SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question about > usage in CSS

    .block-grid > li { display: block; height: auto; float: left; }

    Can you explain what the ">" is doing in the CSS above?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    .block-grid > li { display: block; height: auto; float: left; }

    Can you explain what the ">" is doing in the CSS above?
    In CSS terms, > means "direct child of".

    If you just had .block-grid li {...} then any <li> that was a descendant of any element with class="block-grid" would take those styles, eg
    HTML Code:
    <ul class="block-grid">
    <li>This first one</li>
    <li>This second one</li>
    <ul><li>and this one</li>
        <li>and this one
        <ul><li>and this one</li></ul>
    </li></ul></li></ul>
    So how do you target only the first and second one? You quite possibly don't want the same styles applied to the sub-list and sub-sub-list. That's where the > selector comes in. Because any of the <li>s that start say "and this one" are not direct children of <li class="block-grid">, they're grandchildren or great-grandchildren. So by using the direct child selector, you ensure that you don't hit other elements nested inside.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Very clear explanation. Thank you!

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tested this:

    Code:
    ul>li { text-decoration: blink; }
    on

    Code:
    <ul>
      <li>testing ul>li text-decoration (chosen)</li>
      <li>
        <ol>
          <li>testing ul>li text-decoration (not chosen)</li>
          <li>testing ul>li text-decoration (not chosen)</li>
        </ol>
      </li>
    </ul>
    and ALL of the li elements blink! That can't be right.

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I tested this:

    Code:
    ul>li { text-decoration: blink; }
    on

    Code:
    <ul>
      <li>testing ul>li text-decoration (chosen)</li>
      <li>
        <ol>
          <li>testing ul>li text-decoration (not chosen)</li>
          <li>testing ul>li text-decoration (not chosen)</li>
        </ol>
      </li>
    </ul>
    and ALL of the li elements blink! That can't be right.
    The problem there is that some properties are inherited by their children. A lot of formatting is like that. If you have
    HTML Code:
    <div class="color:red;">
    <p>Some text here</p>
    </div>
    the text in the <p> will be red (unless it's overridden by CSS unseen), even though there is nothing in the CSS that says paragraphs have red text.

    A better way to demonstrate it would be to use font-size:2em;. If you include the > you should see that all the list items are double the size of regular text. But if you leave the > out, the 'not chosen' items will be quadruple the size of normal text (because they are doubled and doubled again as they are contained within two <li>s).

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Then I'm not sure exactly when > will apply in CSS. How do I use it and it NOT affect the other li's?

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Then I'm not sure exactly when > will apply in CSS. How do I use it and it NOT affect the other li's?
    That depends on what properties you want to apply. You can override them with eg
    Code css:
    ul ul {text-decoration:none;}

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So the example given of using ul>li { text-decoration: blink; } to modify

    Code:
    <ul>
      <li>testing ul>li text-decoration (chosen)</li>
      <li>
        <ol>
          <li>testing ul>li text-decoration (not chosen)</li>
          <li>testing ul>li text-decoration (not chosen)</li>
        </ol>
      </li>
    </ul>
    was a poor example of the usage of >. So exactly how would > be used to make a specific line in a code example of your choosing be styled text-decoration:line-through? I'd still like to see a full example. I am just going deeper into CSS theory and testing them for myself to gain more understanding and appreciation.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Here's another example.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    li > ul { display: none }
    li:hover > ul { display: block }
    </style>
    <body>
    <ul>
      <li><a href="home.html">Main</a>
        <ul>
          <li><a href="home.html">Sub1</a>
            <ul>
              <li><a href="home.html">Sub2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </body>
    </html>
    Like Steve said, text properties like font-size / color are always inherited by their children elements so you can't ever apply those styles to one element and not have their children inherit them. You need to override the children styles if you want them to be different.

  10. #10
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Mark,

    That was a helpful example. Thank you! So this tag just doesn't work well in isolation. I get it now.


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
  •