SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use of ">" in CSS?

    Curious...came across something I hadn't seen yet in CSS. (Granted, I'm pretty new at this).

    Here is the bit of code, just haven't seen the > symbol used before:

    Code:
    .button > span {

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    Curious...came across something I hadn't seen yet in CSS. (Granted, I'm pretty new at this).

    Here is the bit of code, just haven't seen the > symbol used before:

    Code:
    .button > span {
    The > means 'direct child' rather than the usual 'descendent'.
    So in the example you've given, it would match
    <div class="button">It would match <span>this text here</span></div>
    <div class="button"><p>But it would not match <span>this text here</span></div>

    because on the second line, the <span> is a grandchild of <... class="button">, not a child.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, makes sense now!

    what about use of the "*"?

    Code:
    .report_tools * {

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    Thanks, makes sense now!

    what about use of the "*"?

    Code:
    .report_tools * {
    * is the universal selector, which means that it matches anything. In that example, it would match any descendent element within something with class="report_tools", although it wouldn't match the element with class="report_tools" itself and nor any text directly inside that element.

    It's a dangerous one to use, particularly as a descendent selector, because
    (i) most of the time it's unnecessary, because a lot of common properties are inherited
    (ii) some properties can end up with compound nesting, such as font-size.
    eg
    Code css:
    body * {font-size:90%;}
    HTML Code:
    <body>
    <p>This text is at 90% of default <i>but this text is at 81%</i> and back up to 90%</p>
    <ul><li>This text is at 81%</li>
        <li>and so is this, <b>but now we're at 73%</b></li>
    </ul>
    <div class="section">
    <table>
    <tbody><tr><td>and now we're right down to 59%</td></tr></tbody></table></div>

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. Thanks for the lesson!


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
  •