Alternate Colors in Post and Widget Titles with CSS :nth-of-type

You can alternate colors for your post and widget titles in your WordPress theme or website. It’s easy with a bit of CSS and the :nth-of-type() pseudo selector. While this may sound a bit difficult, it’s really quite easy.

Use a Four Color Palette for Every Fourth Post and Widget Title

This tutorial starts by using a four color palette to add color to the post titles and widget titles in the Genesis Sample Theme. (Note that this post originally used the WordPress Twenty Twelve theme.)

We want the post titles and widget titles to automatically repeat down the page, regardless of the position of each title or widget. There is also a three color example near the end of the tutorial, if you just want to grab the CSS.

First, choose four colors that look well together. I found a nice blue and green palette – Design Seeds, Minted Brights, 11.10.13. (You can find similar color palettes.) The RGB codes for the four colors are:

• #b04646
• #77a13b
• #83cafe
• #cde364

You can think of each blog post or each sidebar widget as a container or block. There are a number of these containers going down the page, and you can make the title in the first container dark blue, the title in the second container dark green, and the title in the third container light blue, and the title in the fourth container light green. Then these colors will repeat down the page for the next four containers, so no matter how many titles there are, the colors will always alternate in a dark blue, dark green, light blue, light green pattern.

Table to Target Every Nth Item

You can target every fourth item (4n), but here is a chart for the code to target every second item (2n) or every third item (3n), as well.

You can add the CSS code to the style.css in your child theme or in the WordPress Customizer — Appearance > Customize > Additional CSS. Note that this CSS will work for many themes, but you may need to use Firefox or Chrome Developer Tools to find the specific selector you need for your theme.

The CSS for Every Fourth Post Title

This is the code to add to the bottom of style.css to change the color of the post title for every fourth post. You add :nth-of-type() to .entry (You may use .post for some other themes.), the post container. You also add the formula from the table above to target the title in every fourth post.

.entry:nth-of-type(4n+1) .entry-title a {
	color: #046ca3; /* dark blue */
}

.entry:nth">entry:nth-of-type(4n+2) .entry-title a {
	color: #77a13b; /* dark green */
}

.entry:nth-of-type(4n+3) .entry-title a {
	color: #83cafe; /* light blue */
}

.entry:nth-of-type(4n+4) .entry-title a {
	color: #cde364; /* light green */
}

So the title in the first container (4n+1) is dark blue; the title in the second container (4n+2) is dark green; the title in the third container (4n+3) is light blue; and the title in the fourth container (4n+4) is light green.

The CSS for Every Fourth Widget Title

To target the titles in every fourth sidebar widget, you add :nth-of-type() to .widget, the widget container for each widget. This tutorial adds a background color (background-color:) and changes the title color (color:) for each widget. On Genesis themes, use .widget-title and on other themes h3 may work instead.

.widget:nth-of-type(4n+1) .widget-title {
	background-color: #046ca3; /* dark blue */
	color: #83cafe; /* light blue */
}

.widget:nth-of-type(4n+2) .widget-title {
	background-color: #77a13b; /* dark green */
	color: #cde364; /* light green */
}

.widget:nth-of-type(4n+3) .widget-title {
	background-color: #83cafe; /* light blue */
	color: #046ca3; /* dark blue */
}

.widget:nth-of-type(4n+4) .widget-title {
	background-color: #cde364; /* light green */
	color: #77a13b; /* dark green */
}

Add Padding Around the Widget Titles

If you need more space around the widget title for the color bar, as most themes will, you can add some padding using this CSS:

.widget .widget-title {
	padding: 10px; /* add padding to titles */
}

A Three Color Palette for Every Third Post and Widget Title

Because it’s autumn and the leaves are changing now, here is another palette from Design Seeds, Autumn Palette, 10.12.13. The RGB codes for three of the colors are:

• #b04646
• #f0863a
• #f9b840

Then you can target the titles in every third post and widget:

.entry:nth-of-type(3n+1) .entry-title a {
	color: #b04646; /* red */
}

.entry:nth-of-type(3n+2) .entry-title a {
	color: #f0863a; /* orange */
}

.entry:nth-of-type(3n+3) .entry-title a {
	color: #f9b840; /* yellow */
}

.widget .widget-title {
	padding: 10px; /* add padding to titles */
}

.widget:nth-of-type(3n+1) .widget-title {
	background-color: #b04646; /* red */
	color: #f9b840; /* yellow */
}

.widget:nth-of-type(3n+2) .widget-title {
	background-color: #f0863a; /* orange */
	color: #b04646; /* red */
}

.widget:nth-of-type(3n+3) .widget-title {
	background-color: #f9b840; /* yellow */
	color: #f0863a; /* orange */
}

Alternate Table Row Backgrounds

Another way to use the alternating colors is for table row backgrounds.
We’ll use a very light gray for one color and a slightly darker gray for the second color and alternate colors for the rows.

• #fafafa
• #f0f0f0

And the CSS needed is this which should work well in any theme.

table tr:nth-of-type(2n+1) {
	background-color: #fafafa;
}

table tr:nth-of-type(2n+2) {
	background-color: #f0f0f0;
}

Have some fun with color on your Genesis WordPress website!