How can I use the pseudo css elements

Navigation
3

Following a css3 tutorial, I learned how to place icone inside the inputs.

The dev that I was teaching used an example of 2 inputs to put 2 icons 1 in each input.

In this case, you used the following pseudo elements: .form-group :: before .form-group: last-of-type :: before

But in my situation I have 3 inputs which pseudo I use to put an icon in the third imput?

    
asked by anonymous 04.05.2018 / 11:55

1 answer

1

You should use the pseudo class :nth-of-type(n) where "n" is the number of the element order, in your case they are 3 then you would get :nth-of-type(1) :nth-of-type(2) :nth-of-type(3) one for each input

Here is the Mozilla documentation on this pseudo class. link

See a practical example: 

.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" />

Here is an excellent answer between the difference between nth-of-type and nth-child What is the difference between: nth-child and o: nth-of-type?

    
04.05.2018 / 12:12
.gitignore for multi projects - Visual Studio Spring Boot Project with 404 Error