CODEWITHSUNDEEP
htmlcsscss-selectors
JordonNew181
JordonNew181

Reputation: 15

HTML/CSS Table selector First/Last/Not ECT

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

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

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>

DEMO

Upvotes: 0

Senjuti Mahapatra
Senjuti Mahapatra

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

Related Questions