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 WordPress Twenty Twelve theme, so they 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 code.

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 a custom CSS plugin. Note that this code will work for many themes, but you may need to use Firebug 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 .post, the post container. You also add the formula from the table above to target the title in every fourth post.

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

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

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

.post: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.

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

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

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

.widget:nth-of-type(4n+4) h3 {
	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 the WordPress Twenty Twelve theme does, you can add some padding using this code:

.widget h3 {
	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:

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

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

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

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

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

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

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

If you do use this autumn color palette in the WordPress Twenty Twelve theme, you may want to make some additional changes, perhaps the hover colors for the site header text and the links. The default theme hover color is a blue #21759B, but you can change hover on links to red.

.site-header h1 a:hover,
.post a:hover,
.widget-area .widget a:hover {
	color: #b04646; /* red */
}

Have some fun with color on your WordPress website!