Can we style a column of tds in css without adding any class?

Question

Here I want to add background color to the column Sunday without adding css class to it. Can we achieve it without adding a css class and inline style? Here's a sample Fiddle

/------------------HTML----------------/

<table> <tr> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> </table>

/------------------CSS----------------/

table{ border:1px solid #ccc; border-collapse:collapse; padding:5px; } table td{ background:#f6f6f6; padding:3px; border:1px solid #ccc; }

codingrose · Accepted Answer · 2014-03-13 05:22:35Z

Yes you can:

td:first-of-type will select first td i.e. first cell of all rows.

table tr td:first-of-type{//your code}

Updated fiddle here.

CRABOLO · Accepted Answer · 2014-03-13 05:23:53Z

http://jsfiddle.net/uQRA9/2/

Yes you can.

For example :

table td:first-child { background: red; } table td:nth-child(4) { background: blue; }

Mr_Green · Accepted Answer · 2014-03-13 05:29:30Z

Yes using :first-child pseudo class.

table tr:first-child > td:first-child{ background-color :red; }

The above one is for older browsers. You can also use first-of-type as shown by Hiral.

Working Fiddle

Md Mahmudul Haque Fahim · Accepted Answer · 2014-03-13 05:24:41Z

0

use like this

 tr>td:nth-child(1){ background-color:red; }

answered Mar 13, 2014 at 5:24

Md Mahmudul Haque Fahim

2834 silver badges17 bronze badges

Comments

MBehtemam · Accepted Answer · 2014-03-13 05:25:53Z

you can style sun column and all under it with this

table td:first-child{ background-color :red; }

demo

Girish · Accepted Answer · 2014-03-13 05:27:03Z

You can manage by css, :nth-child(0) property provides selector specified index (0,....., n)

table td:nth-child(0){ background:#f6f6f6; padding:3px; border:1px solid #ccc; }

AND

table tr:nth-child(0){ background:#f6f6f6; }

user3410311 · Accepted Answer · 2014-03-13 05:33:05Z

0

table tr:first-child td:first-child { background:...; ... }

answered Mar 13, 2014 at 5:33

user3410311

6226 silver badges8 bronze badges

Collectives™ on Stack Overflow

Can we style a column of tds in css without adding any class?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Related