Reputation: 15
Is it possible to combine selector tags?
What I am trying to do is make the first <td>
inside the first <tr>
style a certain way I have tried a few ways to try and combine these. Granted the ways i have tried are wrong just looking for points if it is even possible.
Tried this:
tr:(:first-child:) td:
{
font-family:"Helvetica";
font-size: 18px;
color: aqua;
}
tr:(:first-child: td:)
{
font-family:"Helvetica";
font-size: 18px;
color: aqua;
}
Thank you in advance.
Upvotes: 1
Views: 37
Reputation: 13998
Very simple and straight forward. Apply it like below.
CSS
table tr:first-child td:first-child {
background:green;
color:#fff;
}
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Upvotes: 0
Reputation: 2590
tr:first-child
will get the first row td:first-child
will get the first cell.
So tr:first-child td:first-child
will get the first cell of the first row.
tr:first-child td:first-child{
font-family:"Helvetica";
font-size: 18px;
color: aqua;
}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Upvotes: 1