Dec 23, 2009

The magic of CSS3 selectors

In this post I’m going to take a look at some of the uses of CSS3, to achieve certain visual effects. I’ll try to demonstrate how we can use these selectors now with a little help from Jquey– can be useful if you can’t change code that is being output by some server-side.

Using nth-child
Showing table row to a different colour is a common way to enhance readability. The simple way to implement this is by adding a class to every other row. if you stick a row in the middle you have to change the rows the class is applied to.
You should selects the odd rows with the following selector:

tr:nth-child(odd) td {
background-color: #86B486;
}

you can also use a multiplier here. 2n would be equivalent to the keyword ‘odd’ 3n would select every third row and so on.

Browser support

Unfortunately , nth-child has poor browser support. It is not supported in Internet Explorer 8. Firefox 3.5 does have support. In some situations however, you might want to consider using JavaScript to add this support to browsers that don’t have it. This can be very useful if you are dealing with such a code where you have no power to change the server-side code to add classes into the markup.

here jquery can help you. add a class to the markup once the document has loaded

  $(document).ready(function(){
$("tr:nth-child(odd)").addClass("odd");
});

Labels: css

By : Motyar+ @motyar