3

Seguindo um tutorial de css3, aprendi a colocar icone dentro dos inputs.

O dev que estava ensinando usou um exemplo de 2 inputs para colocar 2 icones 1 em cada input.

No caso utilizou os seguintes pseudo elementos: .form-group::before .form-group:last-of-type::before

Mas na minha situação tenho 3 inputs qual pseudo devo usar para colocar um icone no terceiro imput ?

1
  • Ronaldo que bom que deu certo! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita.
    – hugocsl
    Commented 4/05/2018 às 11:04

1 Resposta 1

1

Vc deve usar o pseudo classe :nth-of-type(n) onde "n" é o número da ordem do elemento, no seu caso são 3 então ficaria :nth-of-type(1) :nth-of-type(2) :nth-of-type(3) uma para cada input

Aqui tem a documentação da Mozilla sobre essa pseudo classe. https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-of-type

Veja um exemplo prático:

.form-group {
    position: relative;
}
.form-group::before {
    font-family: FontAwesome;
    position: absolute;
    left: 0.5em;
}
.form-group:nth-of-type(1)::before {
    content: "\f002";
    color: red;
}
.form-group:nth-of-type(2)::before {
    content: "\f004";
    color: blue;
}
.form-group:nth-of-type(3)::before {
    content: "\f003";
    color: green;
}
<div class="form-group">
    <input type="text">
</div>
<div class="form-group">
    <input type="text">
</div>
<div class="form-group">
    <input type="text">
</div>

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />   

Aqui tem uma resposta excelente entre a diferença entre nth-of-type e nth-child Qual a diferença entre o :nth-child e o :nth-of-type?

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 .