Is it possible to combine first:Child with :Hover?

Question

It is possible to use these two pseudo-classes together?

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

ul li:hover:firt-child {
}

I’ve tried this way and others but it didn’t work. And I also found nothing on the Internet to help.

Answer 1

It is possible to chain both, but first you have to indicate the element li:first-child and only then the event :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, first you 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 the :hover.

Answer 2

Yes, it’s 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>