Targeting & lt; & gt; element in the first instance of Table in the document

I'm trying to solve a specific problem with CSS selectors. I have the foillowing 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

You can use the first-child psuedo-selector on the td and then target the th inside .region.

Here's a demo:

td:first-child .Region th {
  background-color: red;
}

<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>

Related Articles