Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Meaning of ">" in CSS

    Hello.
    As I was browsing some of the tutorials on making a pure CSS drop down menu list, I came by this line:

    Code:
    #top_nav > li:hover {
    I am wondering what the meaning of the ">" sign is. Does anybody know?

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    53
    Thanks
    11
    Thanked 2 Times in 2 Posts
    I'm gonna take a wild guess and say it's defining the li:hover element for the top_nav id.

  • Users who have thanked JustBlaze for this post:

    john010117 (11-27-2007)

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, that was what I thought it meant. Thank you.
    ... proficient in PHP ...
    ... not to bad in (X)HTML/CSS ...
    ... beginner in Javascript ...

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    To build on what Justblaze said...

    They can be used as a CSS hack to get around older browsers... since IE6 doesn't recognize the > operator, you could use this:

    Code:
    <style>
    #nav a { color: #00f; }
    #nav>a { color: #f00; }
    </style>
    Older browsers would show a blue link, while newer ones would show a red link.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • Users who have thanked BWiz for this post:

    john010117 (11-27-2007)

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, I'll keep that in mind. Thanks.
    ... proficient in PHP ...
    ... not to bad in (X)HTML/CSS ...
    ... beginner in Javascript ...

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Again, I’m feeling like the actual meaning of the '>' character (actually it’s a CSS selector) wasn’t properly explained.

    Here are two sources on CSS selectors explaining all of ’em and which meaning they have:


  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    The ">" indicates that the "#top_nav > li:hover {"
    will work only if the "li" is directly under the "#top_nav" item (probably a div?). If the "li" with the attribute of hover is any where else, it won't apply. If there is some other object (perhaps a "p"?) between them it won't apply.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    We really need to sticky something like this. I mean, seriously.

    Oh, and yes.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by jerry62704 View Post
    The ">" indicates that the "#top_nav > li:hover {"
    will work only if the "li" is directly under the "#top_nav" item (probably a div?). If the "li" with the attribute of hover is any where else, it won't apply. If there is some other object (perhaps a "p"?) between them it won't apply.
    Well, the fact that it’s a list item (li) that is addressed makes it unlikely that the parent is anything else than a list (ul, ol, or dl), and therefore it’s also unlikely that there is anything in between the list element and the list item element because that wouldn’t be allowed in any official version of HTML.

    So, effectively what is being said with the above mentioned rule is that only direct children (list items) of the list element with the ID #top_nav are to be styled, not lower level children (i.e. list items of nested lists).

  • #10
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Good catch!

  • #11
    New Coder
    Join Date
    Jan 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, thank you all for the explanations. I appreciate it.
    ... proficient in PHP ...
    ... not to bad in (X)HTML/CSS ...
    ... beginner in Javascript ...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •