Trova testo e aggiungere css senza utilizzare jquery/javascript

Question

ho tabella come questa:

Tabella 1:

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

Tabella 3:

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

Qui ho 3 tavoli (3 tavoli non sono costanti Tutte le tabelle hanno Titolo4 intestazione ma posizione diversa. Devo cambiare il colore per tutte le tabelle per il testo "Title4" solo senza usare jquery/javascript. Solo usando in css. Eventuali suggerimenti?

Answer 1

Aggiornato buon punto da @shaggy: Che cosa si vuole fare è aggiungere una classe (le classi sono utilizzati più di una volta), che è il selettore CSS . ad ogni elemento <th> che conterrà TITLE4.

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

.blue { 
    color: blue; 
} 

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

Partenza per riferimento, Questo dovrebbe funzionare uso selettore esimo figlio. Sfrutta la possibilità di selezionare un determinato figlio di un elemento. Prima cerca qualsiasi <table> quindi (4) rappresenta il quarto <th> nella tabella qui è title4!

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