CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
Picard
Picard

Reputation: 4112

CSS attribute + pseudo-element with dynamic source strange behaviour

I'm trying to select first-child with a specific attribute (aria-hidden="false") and there is some strange behavior - looks like the attribute selector is getting kind of ignored - and it gets even stranger when the attribute changes dynamically (through javascript)

<ul>
  <li aria-hidden="true"><p class=""><a href=""><span>1</span></a></p></li>
  <li id="id" aria-hidden="false"><p class=""><a href=""><span>2</span></a></p></li>
  <li aria-hidden="false"><p class=""><a href=""><span>3</span></a></p></li>
  <li aria-hidden="false"><p class=""><a href=""><span>4</span></a></p></li>
</ul>

and the CSS:

ul li[aria-hidden=false]:nth-child(1) a {
  color: #00FF00;
  font-size: 30px;
}
ul li[aria-hidden=false]:nth-child(2) a {
  color: #FF0000;
  font-size: 30px;
}
ul li[aria-hidden=false]:first-child a {
  background-color: #0000ff;
}

please see the filddle: http://jsfiddle.net/11sd2r24/5/

do you know how can is select first "li" with aria-hidden attribute set to false

Upvotes: 1

Views: 1192

Answers (1)

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

The :nth-child selector counts all elements on the same level, not only matching ones.

The only way I know to select the nth matching element is :nth-match, but that's was part of a CSS4 draft, but removed afterwards and :nth-child empowered.

Update:

For simple use cases, you achieve similar results by using the + combinator.

For instance, you can apply styles to exactly the second matching item by:

/* style each matching one after the first */
ul li[aria-hidden=false] + li[aria-hidden=false] a {
  color: red;
  font-size: 30px;
}
/* revert for each one after the second */
ul li[aria-hidden=false] + li[aria-hidden=false] + li[aria-hidden=false] a {
  color: inherit;
  font-size: inherit;
}

Your updated JSFiddle

Upvotes: 4

Related Questions