Is it possible to combine first: child with: hover?

Question

Navigation

#1 by (7 votes)
#2 by (6 votes)

4

Is it possible to use these two pseudo-classes together?

I have <ul> and I want the first <li> to pass the mouse to have a different property. I imagine it would be something like:

ul li:hover:firt-child {
}

I tried this way and others, but it did not work. And I also did not find anything on the internet to help.

css css3

asked by anonymous 13.04.2015 / 18:00

2 answers

score 7 · Answer 1

You can chain both, but first you have to indicate the element li:first-child and then only the :hover :

li:first-child:hover {
  background-color: black;
  color: white;
}

<ul>
  <li>primeira</li>
  <li>segunda</li>
  <li>terceira</li>
</ul>

Just like you do when you apply :hover to an element, you first say what that element is and then you say you want a :hover in it.

The :first-child is part of the element specification, which should come before :hover .

score 6 · Answer 2

Yes, it is possible, you can do li:first-child:hover , example:

ul li:first-child:hover{
  color:red;
  cursor:pointer;
}

<ul>
  <li>Primeira</li>
  <li>Segunda</li>
  <li>Terceira</li>
</ul>