CODEWITHSUNDEEP
csscss-selectors
Hamidreza
Hamidreza

Reputation: 1915

Select an element of his parent that is not immediately after his parent

I have this html code:

<div class="form-group well">
    <p>...</p>
    <hr>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
    <div class="select-skill">
        ...
    </div>
</div>

And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.

I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.

Is there any solution to select this element without adding any code of html?

Upvotes: 0

Views: 69

Answers (1)

Albzi
Albzi

Reputation: 15619

JSFiddle

You can use this:

.select-skill:nth-of-type(2){
  background:red;
}

Or if there are more in different div's, you can do:

.form-group .select-skill:nth-of-type(2){
  /*styles*/
}

instead.

Upvotes: 4

Related Questions