CODEWITHSUNDEEP
htmlcss
user1747929
user1747929

Reputation: 11

In CSS3 is "li:hover > a" and "li a:hover" the same

is "li:hover > a" and "li a:hover" the same

such in the codes

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

and

ul#navigation li:hover > a {
background:#fff;}

Upvotes: 0

Views: 9345

Answers (4)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

here is the demo to understand demo

first hover to text then your a color will change to green

next hover right outside text then your a color will change to red

Conclusion

ul#navigation li a:hover

style of a will be changed when a is hovered

ul#navigation li:hover > a

style of a will be changed when li is hovered

Upvotes: 0

Jon P
Jon P

Reputation: 19797

No,

li:hover > a will change the style of a when the li is hovered, li a:hover will change the style of a when a is hovered.

See the diference here: http://jsfiddle.net/uzyUr/

Futher more > is the child selector so a must be a directly nested in li whereas the space is an any descendant selector, so a could be nested as deep in li as you like

Upvotes: 1

Sunyatasattva
Sunyatasattva

Reputation: 5850

Not at all, they are two very different selectors.

 li a:hover

Means: Apply those rules to the a element, which is descendant of a li element, when the user puts his mouse over the former.

 li:hover > a

Means: Apply those rules to an a element, which is direct child of a li element, when the user puts his mouse over the latter.

As you can see, there are several differences.

  1. First of all, the first selector will apply the rules to the anchor, only when the anchor itself is hovered; it means that if you have an anchor element which is smaller then the parent list item, you will have to put your mouse over the anchor to trigger the changes.
  2. On the other hand, the second selector applies the rule to the anchor, wherever the mouse hovers on its parent.
  3. The second rule sports the >, also known as direct descendant selector or child selector which will only apply the rules if the a tag is directly contained within the li with no intermediate containers.

Upvotes: 3

Mark
Mark

Reputation: 8451

The answer is no.

In this part the element that triggers the hover would be the link.

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

While in here, the element that triggers the hover is the li

ul#navigation li:hover {
background:#fff;}

But if you have something like this:

<ul>
 <li><a href="#"></a></li>
</ul>

both CSS would work. On the other hand, if you do something like this:

<ul>
 <li><div></div></li>
</ul>

the 1st one won't work but the 2nd will do.

But if you have '>' like

ul#navigation li:hover > a{
    background:#fff;}

both would be technically the same for the link or <a> tag but,of course the <li> must be present before the link.

Upvotes: 0

Related Questions