Meet the Pseudo Class Selectors

Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover {
  /* Yep, hover is a pseudo class */
}

They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support for them. The link-related ones work but not much else. Let’s take a brief look at each one of them. Don’t worry, there aren’t that many.

Link-related pseudo class selectors

:link – Perhaps the most confusion-causing link-related pseudo-selector. Aren’t all <a> links? Well not if they don’t have an href attribute. This selects only those that do, thus is essentially the same as a[href]. This selector will become a lot more useful should any-element linking become reality.

:visited – Selects links that have already been visited by the current browser.

:hover – When the mouse cursor rolls over a link, that link is in its hover state and this will select it.

:active – Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link or to make all links feel more button-like.

There is a fun technique to remember all the link pseudo-class selectors. Look at the first letter of each: LVHA … LOVE HATE.

Input & link related pseudo class selectors

:focus – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well. Some would tell you to define a :focus style for anything that has a :hover style.

:target – The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. So if you are at URL www.yoursite.com/#home then the selector #home:target will match. That can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels “activate” by matching :target selectors and (for example) using z-index to move to the top.

:enabled – Selects inputs that are in the default state of enabled and ready to be used.

:disabled – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.

:checked – Selects checkboxes that are, wait for it, checked.

:indeterminate – Selects radio buttons that are in the purgatory state of neither chosen or unchosen (like when a page loads with radio button choices but no default is set).

:required – Selects inputs with the required attribute.
:optional – Selects inputs that do not have the required attribute.

:read-only / :read-write – Selects elements based on a combination of readonly and disabled attriutes.

Position/Number-based pseudo class selectors

:root – Selects the element that is at the root of the document. Almost certainly will select the element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.

:first-child – Selects the first element within a parent.

:last-child – Selects the last element within a parent.

:nth-child() – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1”). Has the ability to do things like select even/odd elements, “every third”, “the first five”, and things like that. Covered in more detail here with a tester tool.

:nth-of-type() – Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won’t work there, you’d use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating <dt> and <dd> elements.

:first-of-type – Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.

:last-of-type – Same as above, only would select the last image inside the first div and the last image inside the second div.

:nth-last-of-type() – Works like :nth-of-type, but it counts up from the bottom instead of the top.

:nth-last-child() – Works like :nth-child, but it counts up from the bottom instead of the top.

:only-of-type – Selects only if the element is the only one of its kind within the current parent.

Relational pseudo class selectors

:not() – Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except those with a class of “music” = div:not(.music). The spec says that :not selectors cannot be nested, but they can be chained. Some browsers (Firefox) also support comma-separated selectors as the selector parameter, although chaining them would be a far safter bet. Also useful in conjunction with attribute selectors, e.g. input:not([disabled]).

:empty – Selects elements which contain no text and no child elements. Like:

Text-related pseudo class selectors / elements

::first-letter – Selects the first letter of the text in the element. Typical use: drop caps.

::first-line – Selects the first line of text in the element. Typical use: setting the first sentence in small caps as a typographical eye-catcher/lead-in.

:lang – This pseudo selector is in the CSS3 spec but is only implemented in IE 8+. Will match anything that either has or is a descendant of an element with a matching lang attribute. For example, :lang(fr) will match any paragraph, even without a lang attribute, if the parent body had lang="fr" as an attribute.

Quick note

You can chain pseudo selectors just like you can chain class and ID selectors. This is particularly useful here while we are looking at :first-letter and :first-line. You probably wouldn’t want to drop cap every single paragraph on the page, but just the first one, so, p:first-child:first-letter { }

Content-related pseudo “elements”

::before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.

::after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.

Pseudo Elements vs Pseudo Classes

The above two selectors are appropriately called pseudo “elements” (not selectors) because they don’t select any “real” element that exists on the page. This goes for these two, as well as the previous sections ::first-letter and ::first-line. Make sense? Like the first letter that ::first-letter selects isn’t an element all to itself, it’s just a part of an existing element, hence, pseudo element.

Selector Style	Name	Does	Specificity
::	pseudo element	selects/creates some actual content	0 0 0 1
:	pseudo class	selects elements in certain conditions	0 0 1 0

Tag Qualification

These selectors can be tag-qualified, meaning they will only apply if both the element (tag) and selector match. For instance:

p:first-child {
  color: red;
}

That will only match if the first child of another element is a <p>. If it’s not, it won’t match.

Deprecated

:contains() – As far as I know, this is gone. The current CSS3 spec has removed it. I don’t know the story, let me know if you do. At a glance, it looks ridiculously useful (being able to select objects based on the textual content they contain). It may be because of problems, or having content in selectors being undesirable. My preference would be to have it select by elements rather than text, like p:contains(img), but alas, no such luck.

Update: There is a :has() selector now!

::selection – Allows the changing of style of selected text. It was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. Despite this, it’s implemented in some browsers, which will probably retain experimental support for it. For Firefox, you can use ::-moz-selection. More information here.

Update: ::selection is totally standard now, go ahead and use it!

jQuery Usage

jQuery can use all of these in its selectors, which is awesome. Even awesomer, jQuery has additional pseudo class selectors available.

:first – Matches the first instance of the already matched set. This is different than :nth-child(1) which will only select if the selector matches and it’s the first child. With :first, the selector matches, then it takes the first one it finds regardless of child position.

:eq() – jQuery doesn’t support :nth-of-type as a part of it’s selector engine, but this is very similar.It does now. This selects the Xth element from the already-matched set. It’s also zero-indexed (0 is the first element) unlike :nth-child in which the first element is 1.

:contains('text') – This is removed from CSS, but it works in jQuery.

:lt() – The same as :nth-child(-n+X), as in it selects the “first X elements”

:gt() – The same as :nth-child(n+X), as in it selects everything except the “first (X-1) elements”

:even – The same as :nth-child(even) or :nth-child(2n)

:odd – The same as :nth-child(odd) or :nth-child(2n+1)

:has() – Tests if the element has a descendant of a certain selector before matching, like :has("div.intro").

There are actually a whole bunch more, and all of them are clever and useful (or at least an improvement on readability) See the selector documentation for more.

jQuery can’t really help you with pseudo elements like ::before and ::after, but you can access their values in some browsers. E.g if a div had some ::before generated content, you could get the value like:

var div = document.querySelector("div");

var content = window
  .getComputedStyle(div, '::before')
  .getPropertyValue('content');

Specificity

Class selectors and pseudo class selectors have the same specificity weight. Pseudo elements have the specificity of an element selector.

li             {} /* specificity = 0,0,0,1 */
li:first-child {} /* specificity = 0,0,1,1 */
li:first-line  {} /* specificity = 0,0,0,2 */
li.red         {} /* specificity = 0,0,1,1 */

Typically they are used in conjunction or listed afterwards in CSS anyway, so hopefully it won’t cause too many problems…

ul li.friend { margin: 0 0 5px 0; }
ul li:last-child { margin: 0; }

In that case the zeroing out of the margin would work (assuming it matched the same element), but only because the zeroing out is listed second (they have the same specificity). So… watch for that.