Geek asks and answers

Apply CSS rule only to first <td> in <tr> WITHOUT class / id assignment?

I already looked through this one , this is not what I need here.

I need something like

table.mytable tr first-td { border: 1px solid black; }

for

<table class="mytable">
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
</table>

If this is not possible, just let me know and I will be sad.

Javascript / jQuery is acceptable if it needs to complete a task.

+5
source share
6 answers

Yes. It is possible:

Use in your CSS

.mytable tr td:first-child  { border: 1px solid black; }​

Try here

+4
source 
table.mytable tr td:first-child { border: 1px solid black; }

https://developer.mozilla.org/en-US/docs/CSS/:first-child

Also works in jQuery ( http://api.jquery.com/first-child-selector/ ):

$('table.mytable tr td:first-child')
+8
source

100%, . . http://caniuse.com/#search=:first-child

table.mytable tr td:first-child
+3

You can use :first-of-type, but it is not available in older browsers: http://jsfiddle.net/R9qE3/ .

You can also select the correct elements through jQuery (for cross-browser support), but you will need to update the state when you add tdor move them.

+3
source 
table.mytable tr:first-child {
    border: 1px solid black;
}
+3
source

You can use jQuery "nth child" http://api.jquery.com/nth-child-selector/

It will be something like:

$("table.mytable tr::nth-child(1)")  //do w/e you need to do here.
+2
source

More articles:


All Articles