• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles

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

November 12, 2013 Updated on December 13, 2018 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Item Every 2nd (2n) Every 3rd (3n) Every 4th (4n)
Item 1 2n+1 3n+1 4n+1
Item 2 2n+2 3n+2 4n+2
Item 3 2n+1 3n+3 4n+3
Item 4 2n+2 3n+1 4n+4
Item 5 2n+1 3n+2 4n+1
Item 6 2n+2 3n+3 4n+2

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!

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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.

    Reply
    • Marcy Diaz says

      It looks great, Marcus! And it goes nicely with your new background image too.

      Reply
  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!

    Reply
    • Marcy Diaz says

      You’re welcome, Jane! I’m looking forward to seeing how you used it.

      Reply
  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! :)

    Reply
    • Marcy Diaz says

      You’re welcome, Nylarej. I’m glad my post helped you.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!