Find text and add css without using jquery / javascript

Question

I have a 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 are not constants, but all tables have a Title4 title, but a different position. I need to change the color for all tables for the text "Title4" only without using jquery / javascript. Only use in css. Any offers?

Answer 1

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

 <th class="blue">Title4</th> .blue { color: blue; } 

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

Returning for reference, This should use the nth child selector. It takes advantage of the ability to select a specific child. First it searches for any <table> , then (4) represents the fourth <th> in the table here title4!

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