Category: CSS

Added: 9th of April 2021

Viewed: 332 times

Alternating div background colours using CSS3

If your outputting rows of information on your website, alternating the background colour can make the information easier to read for your visitors.

Before CCS3 the only way to alternate colours on your HTML tables or divs was to use Javsascript. If you were outputting results from a database such as MySQL you would use .php.

The following script below alternates row colours using CSS3 nth-of-type(odd) and nth-of-type(even)

<style>
.box
{
width:70%;
padding:10px;
margin-bottom:10px;
}

.box:nth-of-type(odd)
{
background:#ccc;
}

.box:nth-of-type(even)
{
background:#eee;
}
</style>

<div class="box">My Computer Tips </div>
<div class="box">My Computer Tips </div>
<div class="box">My Computer Tips </div>
<div class="box">My Computer Tips </div>
<div class="box">My Computer Tips </div>


Click here for a live example

Other Tips & Tutorials

CSS

CSS keyframes animation, move text around the screen in a square path

Posted: 2nd of June 2021

Views: 200

CSS

CSS animation, rotate image 90 degrees using transform rotate

Posted: 20th of May 2021

Views: 231

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 332

CSS

How I created rounded boxes in the early days of the web using HTML tables and Photoshop

Posted: 6th of March 2021

Views: 398

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 833

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1546