0

I see code css below:

#nav .hover > a

Whats the meaning of ">" or "<" on code above ? Anyone can explain to me? Thank you.

Lena Queen
  • 751
  • 1
  • 10
  • 18
  • http://css-tricks.com/child-and-sibling-selectors/ – Johanna Larsson Mar 03 '13 at 14:22
  • 1
    Where did you see `<`? This is eerily similar to [this other question](http://stackoverflow.com/questions/6649244/css-angular-tag) where the questioner claims to have seen `<<` in CSS. – BoltClock Mar 03 '13 at 14:23
  • this post will help you understand what it means http://stackoverflow.com/questions/4459821/css-selector-what-is-it – xurca Mar 03 '13 at 14:23
  • possible duplicate of [What does ">" mean in CSS rules?](http://stackoverflow.com/questions/3225891/what-does-mean-in-css-rules) – Jukka K. Korpela Mar 03 '13 at 15:42

3 Answers3

4

> is called the child selector. You take all a's that are direct children of #nav .hover.

The symbol < is not allowed, as it's not to be understood as "less than" or "larger than".

poitroae
  • 21,129
  • 10
  • 63
  • 81
1

There is no < in CSS. Where as, the > is used for direct child selector.

Say, there are many elements in #nav .hover. Consider this HTML:

<div id="nav">
  <div class="hover">
    <a href="#">Direct Link</a>
    <p><a href="#">Indirect Link</a> is this.</p>
  </div>
</div>

The code #nav .hover > a will select only the Direct Link.

Where as, if you put something like #nav .hover a, it will select all the links under #nav .hover. i.e., it will select both Direct as well as Indirect Link.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

It selects only children of that element. In other word:

#menu li:hover > ul { display:block; }

would make the style for any <ul>s inside of that <li> (such with dropdown menus) display:block

Casey Dwayne
  • 2,142
  • 1
  • 17
  • 32