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?

I tried some other. [title~=Title4] { background-color: yellow; } . But I know this is wrong method. — RSKMR
– RSKMR, Commented Jun 25, 2015 at 7:14
You can simple refer this link stackoverflow.com/questions/1520429/… — Jainik Patel
– Jainik Patel, Commented Jun 25, 2015 at 7:18
Hi @all. Just now I updated more details with my question. sorry for that when i add the question minimum information. — RSKMR
– RSKMR, Commented Jun 25, 2015 at 7:28

Spade · Accepted Answer · 2015-06-25 07:40:20Z

4

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

edited Jun 25, 2015 at 7:40

answered Jun 25, 2015 at 7:15

Spade

5913 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

RSKMR Over a year ago

Hi. I have more than 5 tables. So "Title4" is not constant position.(I mean its not 4th th). It will change based on table. so I need to change all tables content "Title4" only need to change the color. I think my question is not clear. I will update

Spade Over a year ago

This will work for multiple tables! see my updated codepen: codepen.io/anon/pen/gpXQOM

RSKMR Over a year ago

Sorry for the minimum information my quesiton. I updated the question with more info.

Spade Over a year ago

what you could do here is add an id to each tables title 4 like so codepen.io/anon/pen/gpXQOM

Shaggy Over a year ago

IDs should be unique and, as per the question, there are multiple tables here so it would be better to use a class in this instance.

|

Collectives™ on Stack Overflow

Find text and add css without using jquery/javascript

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related