4

É possível usar essas duas pseudo-classes juntas?

Tenho um <ul> e quero que a primeira <li> ao passar o mouse tenha uma propriedade diferente. Imagino que seria algo do tipo:

ul li:hover:firt-child {
}

Já tentei dessa forma e de outras mas não deu certo. E também não achei nada na internet pra ajudar.

2 Respostas 2

7

É possível encadear ambos, mas primeiro tens que indicar o elemento li:first-child e só depois o evento :hover:

li:first-child:hover {
  background-color: black;
  color: white;
}
<ul>
  <li>primeira</li>
  <li>segunda</li>
  <li>terceira</li>
</ul>

Tal e qual como fazes quando aplicas o :hover a um elemento, primeiro dizes qual é esse elemento e depois dizes que queres um :hover nele.

O :first-child faz parte da especificação do elemento, motivo o qual deverá vir antes do :hover.

2
  • Já tentei dessa forma também. Meu css está "nav ul.menu > li:first-child:hover {}" Se eu tiro o :hover as propriedades funcionam, mas se boto o hover, para e funcionar. Commented 13/04/2015 às 16:49
  • 1
    Consegui resolver. Na verdade eu precisava pegar o elemento a dentro da primeira li. Dei mole! Ficou o seguinte: "nav ul.menu li:first-child > a:hover" Obrigada! Commented 13/04/2015 às 17:11
6

Sim, é possível, você pode fazer li:first-child:hover, exemplo:

ul li:first-child:hover{
  color:red;
  cursor:pointer;
}
<ul>
  <li>Primeira</li>
  <li>Segunda</li>
  <li>Terceira</li>
</ul>

1
  • 1
    Consegui resolver. Na verdade eu precisava pegar o elemento a dentro da primeira li. Dei mole! Ficou o seguinte: "nav ul.menu li:first-child > a:hover" Obrigada! Commented 13/04/2015 às 17:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .