Whats the meaning of "<" or ">" on css?

Question

I see code css below:

#nav .hover > a

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

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

poitroae · Accepted Answer · 2013-03-03T14:27:13.470

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".

edited Mar 03 '13 at 14:27

answered Mar 03 '13 at 14:21

poitroae

20,729
9
59
80

2

Or just the child selector, because that's what the word child means. – BoltClock Mar 03 '13 at 14:24

score 1 · Answer 2 · answered Mar 03 '13 at 14:22

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.

Casey Dwayne · Answer 3 · 2013-03-03T14:37:06.097

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

edited Mar 03 '13 at 14:37

answered Mar 03 '13 at 14:22

Casey Dwayne

2,122
1
15
32

What does this have to do with the question? – BoltClock Mar 03 '13 at 14:25

Whats the meaning of "<" or ">" on css?

3 Answers3