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: 
> 
> I want to select the span which is highest in the table, or earliest
>  in the DOM
> 
> 
> 

Javascript

For that you can use [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), which will return the first match only, instead of `querySelectorAll`, which will return a lot more than needed, and would be less performant since you don't want all occurrences.

As you state these *spans* are in *table rows*, adding `table tr` to your initial selector will narrow down the search span so it only looks inside a `table` and its `tr`'s for the `span[data-update="status"]`.

```
var first_match = document.querySelector('table tr span[data-update="status"]');

```

---

CSS only

CSS can tackle this problem for specific cases, e.g. if your markup is relatively static and guarantees that the first `span[data-update="status"]` is always in the first `tr`. In these cases you can use a CSS rule to set its style.

It will fail for more generic cases, e.g. if you don't know under which `tr` your `span[data-update="status"]` occurs for the first time or you have no definite knowledge of the exact nesting of your table content or different levels of nesting. This is often the case with dynamically generated content.

```css
table:first-of-type tr:first-child span[data-update="status"]:first-of-type {
  color: red;
}

/*  for styling of this demo only  */
body > div ~ div { margin-top: 20px; }
table td { border: 1px dotted gray; }
```

```html
<div>TABLE 1</div>
<table>
  <tr>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
    </td>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
    </td>
  </tr>
</table>

<div>TABLE 2</div>
<table>
  <tr>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
      <span data-update="status"> SOME TEXT </span>
    </td>
    <td>
      <h3></h3>
      <span data-update="status"> SOME TEXT </span>
    </td>
  </tr>
</table>
```
```
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.