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

Question

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.

would it be possible to use :last-child? o is it just a coincidence that's it's at the end? — jbutler483, Dec 05 '14 at 13:33
possible duplicate of [nth-child doesn't respond to class](http://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class) — Rahul Desai, Dec 05 '14 at 13:33
possible duplicate of [CSS :nth-of-type selector breaks on non-matching childs](http://stackoverflow.com/questions/27313984/css-nth-of-type-selector-breaks-on-non-matching-childs) — , Dec 05 '14 at 13:59

Salman A · Answer 1 · 2014-12-05T21:40:43.873

:nth-child further restricts the matched elements to those that are nth child of its parent. There is no CSS selector that matches nth element having class x.

For the given markup, you could use the + combinator:

.visible ~ .visible ~ .visible ~ .visible ~ .visible {
  /*
   * matches .visible element with at least 4 previous .visible siblings
   */
  text-decoration: underline;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible ~ .visible {
  /*
   * matches .visible element with at least 5 previous .visible siblings
   */
  text-decoration: line-through;
}

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

Der Vampyr · Accepted Answer · 2014-12-05T13:46:28.623

1

~~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

edited Dec 05 '14 at 13:46

answered Dec 05 '14 at 13:31

Der Vampyr

941
1
7
13

Ah i see. Unfortunately this sticks to html elements and not to classes. Because all your elements are `
`s it doesn´t work either, sorry.
– Der Vampyr Dec 05 '14 at 13:44
Thanks, I'll do that :) – Karol Klepacki Dec 09 '14 at 12:25

score 0 · Answer 3 · answered Dec 05 '14 at 13:35

You can add a div at the beginning of the visible class and give it the nth-child http://jsfiddle.net/7uap9v21/3/

<div class="visible-holder">
<div class="visible ticket">BLA 4</div>
<div class="visible ticket">BLA 5</div>
<div class="visible ticket">BLA 6</div>
<div class="visible ticket">BLA 7</div>
<div class="visible ticket">BLA 8</div>
</div>

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

3 Answers3