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, Jun 25 '15 at 07:14
You can simple refer this link http://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — Jainik Patel, Jun 25 '15 at 07:18
Hi @all. Just now I updated more details with my question. sorry for that when i add the question minimum information. — RSKMR, Jun 25 '15 at 07:28

Spade · Answer 1 · 2015-06-25T07:40:20.717

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 '15 at 07:40

answered Jun 25 '15 at 07:15

Spade

591
3
20

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 – RSKMR Jun 25 '15 at 07:17
This will work for multiple tables! see my updated codepen: http://codepen.io/anon/pen/gpXQOM – Spade Jun 25 '15 at 07:19
Sorry for the minimum information my quesiton. I updated the question with more info. – RSKMR Jun 25 '15 at 07:23
what you could do here is add an id to each tables title 4 like so http://codepen.io/anon/pen/gpXQOM – Spade Jun 25 '15 at 07:24
1

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. – Shaggy Jun 25 '15 at 07:33
The table th don't have any class. because the table render from database and its cann't able to add class('blue'). – RSKMR Jun 25 '15 at 09:01
@RSKMR Are you using PHP to loop and pull each set of data? – Spade Jun 25 '15 at 16:29
No. render data from Java/GWT. – RSKMR Jun 26 '15 at 03:26
Could you provide an example of how you are pulling the data I could come up with a Java solution as well, basically when iterating through adding a class to each element and than using css to target these elements for the color change – Spade Jun 26 '15 at 03:27
Sample Code: getModelTable().addColumn(new TextCell(), "Bill Amount", new GetValue() { public String getValue(BillDo bill) { return BQFormatter.formatCurrency(bill.getBillAmount()); } }, null); getModelTable().setRightAlignFlag(true); getModelTable().addColumn(new TextCell(), "Pay Amount", new GetValue() { public String getValue(BillDo bill) { return BQFormatter.formatCurrency(bill.getPayAmount()); } }, null); – RSKMR Jun 26 '15 at 04:23

Find text and add css without using jquery/javascript

1 Answers1