How can I use pseudo css elements

Asked

Viewed 50 times

3

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

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

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

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

css css3 css-font-face pseudo-elements

  • Ronaldo glad it worked out! If my reply helped you in any way consider mark it as Accept, in this icon ✔ below the arrows on the left side of my answer :) so the site does not get open questions pending no answer accepted.

1 answer

1


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

Here’s the Mozilla documentation for this pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/:Nth-of-type

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’s an excellent answer between the difference between nth-of-type and nth-child What is the difference between :Nth-Child and :Nth-of-type?

Browser other questions tagged css css3 css-font-face pseudo-elements

You are not signed in. Login or sign up in order to post.