Information inside a table or a list needs to be displayed in such a way so it will be easier to read. Most of us will use the same method when we display information inside table or list. We usually choose two color for example grey and white and put them as background on each row. In the old times I will use PHP to detect between odd and even row, for example I will use grey as a background color for an even row and white for odd. Today we can use CSS3 to detect odd and even row and we can put different style on each one.
We will use nth-of-type(n) to detect odd and even row. This selector is one of new selector in CSS3 that will matches every element that is the nth child. This selector accept one argument, n, which can be an expression, a number or an expression of the form an+b. One of the expression is odd and even.
In this tutorial, we will create a list using ordered list(ol) and we will use nth-of-type(n) to detect the row. It is very simple and you can use your imagination to put the same method on different style.
First we create our HTML code
<h3>Country In Asia</h3>
Then we put this style on our document
list-style-type: none; width: 200px; border:1px solid #c4cde0; border-radius:5px; margin: 0; padding: 0px; font-size: 12px;
At the end you should get this result
The nth-of-type selector is supported is major modern browser like IE, Mozilla Firefox, Chrome, Opera etc. Here is the detail:
IE: IE8 and earlier are not supported this selector
Firefox: Firefox 3.5 support this selector
Opera: Opera 9.5 support this selector
Chrome: Chrome 2 support this selector