08 Feb 2012 1 Comment

CSS3 Tutorial: Create a Simple List With Odd and Even Detection

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.

The Code

First we create our HTML code

<h3>Country In Asia</h3>
<ol id="countrylist">
<li>Indonesia</li>
<li>Singapore</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>China</li>
<li>Japan</li>
</ol>

Then we put this style on our document

 #countrylist{
        list-style-type: none; width: 200px; border:1px solid #c4cde0; border-radius:5px; margin: 0; padding: 0px; font-size: 12px;
    }
    #countrylist li{
        padding:5px;
    }
    #countrylist li:nth-of-type(even){
        background-color: #c4cde0;
    }

At the end you should get this result

html5list CSS3 Tutorial: Create a Simple List With Odd and Even Detection

Browser Support

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

 

Incoming search terms:

Be Sociable, Share!
  • more CSS3 Tutorial: Create a Simple List With Odd and Even Detection

Related Posts:

by kangtanto in CSS, Web Tags: , , ,