将nth-child与类匹配的元素

Question

I want to use :nth-child to select the second span using its class

<div id="myDiv">
     <span class="mySpans">Stuff</span>
     <span class="mySpans">Stuff</span>
     <span class="mySpans">Stuff</span>
</div>

I am trying the following with no luck

'div#myId > span:nth-child(2 of span.mySpans)';

I am specifically looking to match the element using the nth occurance a class.

Answer 1

Currently, only Safari supports the selector-list argument of :nth-child() introduced in selectors-4.

There is no other way to do this in CSS besides adapting the overriding technique from here , but with an additional selector for the 3rd .mySpans onward:

div#myId > span.mySpans, div#myId > span.mySpans ~ span.mySpans ~ span.mySpans {
  /* ... */
}

div#myId > span.mySpans ~ span.mySpans {
  /* Remove from previous rule */
}

If this is in JavaScript or some other API that returns a set of elements as the string-like notation in your question suggests, you can just index off of it since your parent element has an ID and therefore you're only concerned with one set of elements (assuming the parent ID is actually unique, of course):

document.querySelectorAll('div#myId > span.mySpans')[1]

See also: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

Answer 2

Obviously the much-requested :nth-of-class doesn't exist yet.

But if you are happy to use a javascript translation* of this hypothetical CSS:

#myDiv .mySpans:nth-of-class(2) {
color: red;
}

there are two possible translations:

document.getElementById('myDiv').getElementsByClassName('mySpans')[1].style.color = 'red';

document.querySelectorAll('#myDiv .mySpans')[1].style.color = 'red';

---

NB It's not a real translation, of course - it simply locates the element in the Document Object Model (DOM) and then applies style="color: red;" to that element.