Search code examples
htmlcsscss-selectorspseudo-class

nth-child selecting wrong element from a multi-class div

I have some divs with 2 classess - all of them have ticket class and some of them have visible class:

<div class="ticket hidden">BLA 1</div>
<div class="ticket hidden">BLA 2</div>
<div class="ticket hidden">BLA 3</div>
<div class="ticket visible">BLA 4</div>
<div class="ticket visible">BLA 5</div>
<div class="ticket visible">BLA 6</div>
<div class="ticket visible">BLA 7</div>
<div class="ticket visible">BLA 8</div>

When I'm adressing it with: 

.visible:nth-child(5) {
 text-decoration: underline;
}

I get BLA 5, and i want BLA 8

How can I adress specific .visible element?

JSFiddle.

Solution

  • nth-child() don´t care which class you want to check. It always count all siblings in a DOM element.

    Maybe you want to give :nth-of-type a chance: developer.mozilla.org

    Maybe the best solution is to use some jQuery and add another class to append the underline style