I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:

```html
<table class="Layout">
    <tr>
 <td>
     <table class="Region">
  <tbody>
      <tr>
   <th align="left">Header 1</th>
      </tr>
      <tr>
   <td>
       <table class="SelectionTable">
    <tbody>
        <tr>
     <td>Text 1</td><td>Text 2</td>
        </tr>
    </tbody>
       </table>
   </td>
      </tr>
  </tbody>
     </table>
 </td>
 <td valign="top"></td>
 <td valign="top">
     <table class="Region">
  <tr>
      <th align="left" colspan="2">Header 2</th>
  </tr>
                <tr>
      <td>Text 1</td><td>Text 2</td>
  </tr> 
            </table>
 </td>
    </tr>
</table>
```

What I need to do is select the first occurence of the class "Region" within the document, and then select the **th** element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.

I currently have this css which applies background color to the th elements of the two "Region" tables:

```
TABLE.Region TH {background-color: #00A5DB;}

```

But I want to apply background-color: #BAD80A to only the first occurence of "Region" 

I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.

Any help would be appreciated!

Thanks