CODEWITHSUNDEEP
htmlcsscss-selectors
Dark Night
Dark Night

Reputation: 511

What are the differences between these CSS lines

#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}

1) what is the difference between "li.hover" and "li:hover"?

2) what does "ul ul li" even mean? why are there 2 "ul" elements?

Upvotes: 2

Views: 106

Answers (4)

jeffdill2
jeffdill2

Reputation: 4114

li.hover is targeting an li element that also has a class of hover, for example:

<li class="hover"></li>

li:hover is targeting the hovered state of any li element.

ul ul li is targeting any li elements that reside in a ul element that resides inside another ul element, like so:

<ul>
  <li>
    <ul>
      <li>This is the element that would be targeted</li>
    </ul>
  </li>
</ul>

Upvotes: 5

ovgu12
ovgu12

Reputation: 130

1) li.hover li element which have class hover exp .. li:hover li element which are being hovered.

2) ul ul li only li element which have at least ul as ancestors exp:

<ul>
 <li>
  <ul>
   <li>
      ME
   </li>
  </ul>
 </li>
</ul>

Upvotes: -1

herrh
herrh

Reputation: 1368

1) li.hover is a defined class. You can use it like <li class="hover">. li:hover defines the hover state. It will appear if you hover an element with your cursor.

2) ul ul li : The second ul styles a ul in an available ul. It can be used for sublists.

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

Upvotes: 1

Zak
Zak

Reputation: 7515

.hover is a class identifier

:hover denotes the action of mouseOver

Upvotes: 1

Related Questions