Matching the First/Nth Element of a Certain Type in the Entire Document

How to select nth element of the same type

I know I can do it with document.querySelectorAll("td")[nth], but I'm looking for a pure css way.

There is no pure CSS equivalent. See Matching the first/nth element of a certain type in the entire document

Matching first element in whole document?

are you allowed to cheat with jQuery? some times jQuery (javascript) provide(s) elegant alternatives beyond the html and css limitations

$(document).ready(function() {
 $('body').find('h1:first').css('color','#0000ff');
}); //  ready

Can you target a specific element among the results of a css selector independent of it's location? or relation?

I just saw some clarification to the question. Here is a much simpler fiddle to get all spans with "aClass" into a list that will let you target the nTh span. Still using Jquery instead of CSS.

https://jsfiddle.net/h2e0xgwf/6/

$(document).ready(function(){
var nTh = 5;  // change this to whichever N you wish
var allSpans = $("div > span.aClass");
$(allSpans[nTh-1]).html($(allSpans[nTh-1]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");



 });

CSS Selector for nth element regardless of parent

NO

The spec says:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

There is no nth-of-DOM selector.

The operative word here is siblings..which requires a parent, not uncles or grandparents etc.

As mentioned in the comments by @Marcos Pérez Gude

"The DOM is a tree. So if you think about it, a node depends always on its parent."

Select first element of a type on page even when elements are nested at different levels

When there is an unspecified depth and no class assignments it becomes very difficult to target this without traversing the DOM
Using Just plain-ol-vanilla css I don't see a way to do this but using a tiny jQuery you can achieve it

var ps = $('p');
console.log(ps[0])$(ps[0]).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>   <p> p element at one nesting</p></div>
<p> p element not nested</p>
<h1>  <p> p element at one nesting (oddly nested inside h1 tag)</p></h1>
<div>  <div>     <p> p element at two nestings</p>  </div></div>