CODEWITHSUNDEEP
css
Lena Queen
Lena Queen

Reputation: 751

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

I see code css below:

#nav .hover > a

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

Upvotes: 0

Views: 170

Answers (3)

Casey Dwayne
Casey Dwayne

Reputation: 2169

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

Upvotes: 0

poitroae
poitroae

Reputation: 21367

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

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 1

Related Questions