Handy CSS tips and tricks for WordPress themes

One of the first things everyone loves to do when they install a WordPress theme is tweak the styles of the theme. Hopefully everyone is using a child theme when they customize their theme, but that’s a post for another day. Today’s post is going to focus on some handy CSS pseudo class tips you can use.

A pseudo-class is a keyword added to CSS selectors that indicates a particular state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. But you can also do some other sweet tricks with pseudo selectors.

Structural selectors

There are many instances where you’ll end up needing to traverse through a list of elements and target a certain element. Maybe you want to apply a certain style to an item or maybe you want to hide something in particular. Let’s start with some simpler psuedo classes like :first-child and :last-child that will help us achieve this.

Let’s say, for example you had a list of items. Using the :first-child pseudo class we could target the first item in this list and change the background color.

.awesome-list li:first-child { background: #d1ecf4; }

See the Pen gWOogK by Mike McAlister (@mikemcalister) on CodePen.

Similarly, we can use :last-child to target the last item in this list.

.awesome-list li:last-child { background: #d1ecf4; }

Pretty simple, huh? But what if we wanted to target one of the items in between the first or last item? We can do a little counting with :nth-child(n), which will count items starting at the beginning of the list. For example, we can target the 3rd item in the list with the following selector.

.awesome-list li:nth-child(3) { background: #d1ecf4; }

See the Pen XRWERG by Mike McAlister (@mikemcalister) on CodePen.

Getting a little more fancy, we can even count backwards, starting at the bottom of the list.

.awesome-list li:nth-last-child(3) { background: #d1ecf4; }

Similar to :first-child and :last-child are :first-of-type and :last-of-type. These selectors represent an element that is the first or last sibling of its type in the list of children of its parent element.

Sibling combinators

Sibling combinators will allow you to target elements that come after a specified element. This is handy for targeting a specific order in which an element appears. In our example below, maybe you would only want to target the first paragraph that followed a page title instead of all paragraphs.

The + combinator will select only the specified element that immediately follows the former specified element. Using this method, we can target only the first paragraph following the title.

.awesome-post h2 + p { background: #d1ecf4; }

See the Pen dWymzY by Mike McAlister (@mikemcalister) on CodePen.

The ~ combinator is more generic, and will select any matching elements that come after the former element.

.awesome-post h2 ~ p { background: #d1ecf4; }

In this instance, all of the paragraphs following the title would be styled, as long as they share a common parent.

See the Pen WjNzXz by Mike McAlister (@mikemcalister) on CodePen.

Unfortunately, sibling selectors only work with elements that come after the former element. There isn’t a selector to find siblings that precede another element.

The negation selector

This is one of my favorite pseudo selectors because of how handy it can be. The negation selector matches an element that is not represented by the argument. Basically, it’s a way of excluding an element from being styled or manipulated by your style rules.

Let’s say we had a list that had several items and we wanted to apply styling to all of the list items except one particular item. Using the negation pseudo selector, we can target only this list item.

.awesome-list li:not(.michael) { background: #d1ecf4; }

See the Pen qmBopE by Mike McAlister (@mikemcalister) on CodePen.

You can also use other pseudo selectors within the negation selector. In this example, we could style all of the list items except the last item.

.awesome-list li:not(:last-child) { background: #d1ecf4; }

See the Pen RVwMyK by Mike McAlister (@mikemcalister) on CodePen.

Wrapping up

These are just a few CSS tips you can use to apply quick and creative customizations to your site. Hopefully you found this helpful and learned a few tricks in the process! In a future post, we’ll dig a little deeper and look at some more advanced CSS.

Published by Mike McAlister

A high-powered mutant of some kind, never even considered for mass production. Too weird to live, and too rare to die. I design all the things.

1 Comment

  1. Thanks for this useful information.

    Reply

Leave a Reply

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

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match