CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
Karol Klepacki
Karol Klepacki

Reputation: 2098

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.

Upvotes: 2

Views: 433

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272076

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

Upvotes: 3

Der Vampyr
Der Vampyr

Reputation: 951

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

Upvotes: 1

Akshay
Akshay

Reputation: 14348

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>

Upvotes: 0

Related Questions