How to set STYLE which work only on down side controls? - html

Question

I want to set style for <td> tag, I am designing table in a page. I want to give different styles for upper and lower cells, is that possible to set <style> which only do work on down side <td> tags.
Please Help.

Answer 1

Yes, you either give a class to lower <td> tags and then inside <style> you can set their style. or you can use this css selector without giving your <td> elements a class.
Here is a representation of what I just said:
<table id="table1">
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>6</td>
</tr>
</table>
<style>
#table1 tr td:last-child {
background-color: green;
}
.lowertd {
background-color: silver;
}
#table1 tr td:nth-child(1) {
background-color: blue;
}
</style>

Answer 2

For your requirement you need to create a css class and reference it by
<td class="someclass" ........... >
although you want to add this class, only for elements for which you need styling.
and in CSS under <style> , define css attributes. Something like below
<style>
.someclass{
property: value;
.
.
.
}
</style>
Hope this solves your problem.

Answer 3

I got the answer...
Just set the particular rows in any tag like <thead>, <tbody> or <tfoot>
<table id="table1">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
</table>
then set style
<style>
table thead td
{
border:none;
}
</style>

Answer 4

You can style the first 10 <td> tags differently by using the nth-of-type selector and then setting a style for those elements:
td:nth-child(-n+10) { text-decoration: underline; }
jsfiddle