Styling table cells in a particular column using CSS

Print Friendly

While cleaning up and refactoring my code, i used the following CSS hack. This one made my code look more beautiful and readable, 

To apply CSS style to every table cell (td) in a particular column, without applying the class/style attribute to every table cell in that column, and without JavaScript, we can use pseudo classes and /or sibling selectors: 

For the first and last columns you can use the :first-child and :last-child pseudo class:

td:FIRST-CHILD {
    /* Properties for first cell of every row */
}
td:LAST-CHILD {
    /* Properties for last cell of every row */
}

You can also To style specific table cells you can use and combine :first-child with the adjacent sibling selector+ 

td:first-child {
    /* Properties for first column of every row */
}
td:first-child + td {
    /* Properties for second column of every row */
}
td:first-child + td + td {
    /* Properties for third column of every row */
}

This works like a charm.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
http://www.windowsvj.com/outlet