Find text and add css without using jquery/javascript

Question

I have table like this:

Table1:

<table> 
 <tr>
  <th>Title1</th>
  <th>Title2</th>
  <th>Title3</th>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text3</td>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text3</td>
  <td>Text4</td>
 </tr>
</table>

Table2:

<table> 
 <tr>
  <th>Title1</th>
  <th>Title2</th>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text4</td>
 </tr>
</table>

Table3:

<table> 
 <tr>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text4</td>
 </tr>
</table>

Here I have 3 tables(3 tables is not constant. But all table have Title4 heading but different position. I need to change color for all tables for the text "Title4" only without using jquery/javascript. Only using in css. Any suggestions?

Answer 1

Updated good point from @shaggy: What you want to do is add a class (classes are used more than once) which is the css selector . to each <th> element that will contain Title4.

<th class="blue">Title4</th>

.blue {
  color: blue;
}

http://codepen.io/anon/pen/gpXQOM

Leaving up for reference, This should work use nth child selector. It takes advantage of being able to select a certain child of an element. It first looks for any <table> then the (4) represents the fourth <th> in the table here it is title4!

 table th:nth-child(4) {
        background: blue;
    }