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

use CSS nth-of-type for colorful WordPress post and widget titles


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.

ItemEvery 2nd (2n)Every 3rd (3n)Every 4th (4n)
Item 12n+13n+14n+1
Item 22n+23n+24n+2
Item 32n+13n+34n+3
Item 42n+23n+14n+4
Item 52n+13n+24n+1
Item 62n+23n+34n+2

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
table with alternate color rows

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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

6 responses to “Alternate Colors in Post and Widget Titles with CSS :nth-of-type”

  1. Thank you Marcy for an excellent Post.

    I used 7 primary colors for my Post titles and it really gives the Metro-Pro theme a color boost!

    Take a look at http://tibesar.com/blog

    Here is the color scheme I used:

    .post:nth-of-type(7n+1) .entry-title a {
    color: #78A22F; /* green */
    }

    .post:nth-of-type(7n+2) .entry-title a {
    color: #00A4E4; /* blue light */
    }

    .post:nth-of-type(7n+3) .entry-title a {
    color: #0068B3; /* blue dark */
    }
    .post:nth-of-type(7n+4) .entry-title a {
    color: #673E98; /* purple */
    }

    .post:nth-of-type(7n+5) .entry-title a {
    color: #B5121B; /* red */
    }

    .post:nth-of-type(7n+6) .entry-title a {
    color: #F68C1F; /* orange */
    }
    .post:nth-of-type(7n+7) .entry-title a {
    color: #606060; /* grey */
    }

    Again, thank you for a very helpful and educational article.

  2. Jayne Stephenson says:

    Thank you so much for this! This is exactly what I was looking for. My site (to be launched after Easter 2014) now looks completely themed. Wonderful!

  3. Nylarej says:

    Thanks, Marcy! It helps a lot. I applied it to my blog site. You can check it out. Keep posting more tips. Kudos to you! :)

Leave a Reply

Your email address will not be published. Required fields are marked *