Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | CSS3 Pseudo-Classes
1017
single,single-post,postid-1017,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
01-basic

CSS3 Pseudo-Classes

Today I’m going to cover another bit of CSS3 magic. They’re called CSS3 Pseudo-Classes.

You may be familiar with the typical CSS pseudo-classes that we have been using for years:

  • :link
  • :hover
  • :active
  • :focus

But now that we are moving in to CSS3, there are a bunch of new ones that have been added. I will go through each of them and briefly explain what they do. I have created an example that you can download here: CSS3 Pseudo-Classes Example

Basic Classes

:root

Root will almost always (as long as you set up your HTML correctly) be the <html> tag. In my example I used :root to set a background for the document, though I can’t see much better use of this.

:root {
	background: #eee;
}

:before & :after

Before and after are generally used with the “content” css attribute. You can use this to add non-semantic elements to your site that you don’t want making your html messy. This could be useful for adding icons before items without adding a span or something similar for it.

p#before:before {
	background: #24E0A8;
	content: 	\\\\\\'Inserted by CSS (:before)\\\\\\';
}

p#after:after {
	background: #24E0A8;
	content: 	\\\\\\'Inserted by CSS (:after)\\\\\\';
}

:empty

Empty can be used to style elements that have no children and no content. It could be a good way to debug your html to find empty tags.

p:empty {
	background: red;
}

:target

Target is a strange one. Basically you can style an element a certain way if it’s ID corresponds to the ID in your url (e.g. whatever.com/index.html#target). So if you have a p tag with the id “target” and you go to a url with #target on the end and have the following CSS, it will affect that item.

p:target {
	background: #ff6600;
}

:checked

With Checked, you can style a radio button or checkbox only when they are actually checked. There isn’t too much you can do to style a checkbox, but with some fancy css, you might be able to pull something off.

:enabled & :disabled

Enabled and disabled can be used to style a text input field when it either has the attribute disabled=”disabled” or not. This is a nice step up from the default greyed out box it normally creates. In all reality, I don’t see much use for :enabled, since this is related to no attribute and would be the same as just setting a default style.

input:enabled {
	background: #24E0A8;
}

input:disabled {
	background: red;
}

 :not()

With not, you can select items that do not apply to whatever is in the parentheses. In this example, we select all inputs that are not a checkbox and add a border to it.

input:not([type=\\\\"checkbox\\\\"]) {
	border: solid 1px #000;
}

Here is a visual representation of the above “basic” pseudo-classes with some notes on what is going on:

“nth” Classes

:nth-child()

Nth-child has multiple uses. It all depends on what you put in the parentheses. Here are some options, and what they do:

  • 2 – This will select the second item
  • 2n+5 – This will start by selecting the 5th child and then select every 2nd child after that (every other one)
  • 2n or even – These will both select every other even item (2, 4, 6…)
  • 2n+1 or odd – These will both select every other odd item (1, 3, 5…)
  • 3n-1 – This will select every 3rd item, offsetting backward by 1 (Starting with 2)

There is a good nth-child tester in the links at the bottom of this post.

:nth-last-child()

Nth-last-child works exactly the same as nth-child, except instead of starting from the first child, it will start from the last child and go backward

:first-child & :last-child

These two do exactly what you would think they would. They select the first child or the last child in a parent. They are the equivalent of doing :nth-child(1) (first) and :nth-last-child(1) (last).

/******************************************************************
/ Selecting a single element
/*****************************************************************/

ol li:nth-child(2),
ol li:nth-last-child(2) {
	background: #ff3399;
}

ol li:first-child,
ol li:last-child {
	background: #6633cc;
}

/******************************************************************
/ Selecting multiple elements
/*****************************************************************/

ol li:nth-child(2n+3) {
	background: #ff3399;
}

Here is a visual representation of these:

-of-type Classes

:nth-of-type, :nth-last-of-type, :first-of-type, & :last-of-type

These all work almost identically to the ones above, except they take in to account the type of item you are selecting.

For example, say you had the following HTML/CSS:

<p>This is a P</p>
<p>This is a P</p>
<p>This is a P</p>
<p>This is a P</p>
<span>This is a Span</span>
<span>This is a Span</span>
<span>This is a Span</span>
<span>This is a Span</span>
p:last-of-type {
	background: #6633cc;
}

The 4th <p> tag would be selected, whereas if you had simply used p:last-child, the 4th <span> would have been selected. This is useful for when you have additional items inside your parent, but you don’t want them to be considered in your selector.

All of the -of-type selectors will work exactly the same as their regular counterparts, but only using the type specified.

Here is a visual representation of these:

: only-of-type

Only-of-type is a unique selector that will only select an element if it is the only of it’s type in it’s parent. For example, take the following HTML/CSS:

<div>
	<strong>This is a Strong</strong>
</div>

<div>
	<strong>This is a Strong</strong>
	<strong>This is a Strong</strong>
</div>
strong:only-of-type {
	background: #ff3399;
}

The first div has only one strong, so it will be selected. The second has 2 and they will be ignored. If you had any other type of element in these divs (say a p or a span) they would not affect the selection and would also be ignored.

Here is a visual representation:

Useful Links

http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/ - This article goes into detail for each of the pseudo-classes I mentioned
http://css-tricks.com/examples/nth-child-tester/ - This is a great way to test your nth-child selectors
http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/ - These are some examples of what can be achieved using pseudo-classes