Question: I have a CSS selector: `span[data-update="status"]`

This selector retrieves between 0 and N spans in a page.

I want to modify this selector so it selects the span higher in the DOM.

All of these spans belong to TRs which belong to a single table, and I want to select the span which is highest in the table, or earliest in the DOM.

Answer: 
CSS can not do that. However your language of choice will return an array with which you can then index the first element.

```
let element = document.querySelector("span[data-update=\"status\"]"); 

// or fetch the entire nodelist, and manually select the first element

let selection = document.querySelectorAll("span[data-update=\"status\"]");
let firstElement = selection[0];

```

JavaScript: <https://developer.mozilla.org/en-US/docs/Web/API/NodeList>  

Java: <https://docs.oracle.com/javase/8/docs/api/org/w3c/dom/NodeList.html>
```
Element.querySelector('CSSselector')

```

... does exactly this. Note `Element` has to be a DOM element or `document` itself. 

If using jQuery use either `$(parentToSearch)[0].querySelector('CSSselector')` or `$('CSSselector', parentToSearch).first()`

This can also be achieved with a pure CSS solution if the relation between the targeted spans and the subsequent siblings holding them (`<tr>`s) is the same, by styling all with `tr selector` and than negating the styling for all but first with `tr ~ tr selector`. Cumbersome and with limited applicability, but possible.