I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The First Instance Of An Element: Adjacent, first-child, and nth-of-type Selectors

css / selectors

Estimated reading time: 2 minutes, 56 seconds

Photograph of a baseball diamond first baseIt’s fairly common to provide the first appearance of an element with a particular look: italicizing the first paragraph on a page, for example, or creating a first-line run-in effect. Traditionally, this has been achieved by applying an id to the affected element. There are significant drawbacks to that approach: every time we create a new first paragraph, we must remember to apply the id to create the effect. It is much easier to create a consistent rule that works on context, rather than depending on developer intervention.

If we disavow use of id’s, classes and inline styles due to their inefficiency, then there are three other solutions to customizing the appearance of the first instance of an element.

Solution 1: Use an Adjacent selector

An adjacent selector is the obvious solution, so long as the pages have consistent markup. As an example, first paragraphs will often follow an h1 element:

<h1>Opening heading</h1>
<p>First paragraph content…

If our pages followed this structure, we could select the first paragraph on each page with the following:

h1 + p { font-style: italic; }

Translated into English, the selector, property and value would read as “Italicize the text of the first paragraph that immediately follows an h1 element”.

The problem with this approach is its precision. If we have a sub-heading element between the <h1> and the <p>, the CSS rule will no longer work: the paragraph will be preceded with an <h2> element, not an <h1>. Similarly, if the page does not contain an <h1>, the first paragraph won’t receive the special style.

Solution 2: Use a first-child selector

Sometimes a better technique is to use a first-child pseudo-selector, which matches the first element in a context. For example, to select the first instance of a paragraph in the body, we could use:

body p:first-child { font-weight: 800; }

It’s probably easiest to read this selector in reverse: “If the first element inside the body is a paragraph, make it extra-bold”.

However, this only works if the paragraph is not preceded by any other markup: if there is a heading before it, the paragraph is no longer the first child of the body, and will not be affected by the rule.

Solution 3: Use an nth-of-type selector

Although less common, the best and most adaptable solution is to use a first-of-type or nth-of-type selector. Very simply, the CSS selectors do what they say: match the first or nth instance of an element in a particular context. Continuing our example above (the first paragraph inside a page) we could write:

p:first-of-type { font-style: italic; }


p:nth-of-type(1) { font-style: italic; }

The number in parentheses at the end of the selector simply indicates which element is to be affected: 1 represents the first matching element, 2 the second, and so on. It’s also possible to place calculations in the parentheses.

Using first-of-type or nth-of-type above means that the paragraph could be preceded by any amount of markup or content, and still be affected by the style. You can, of course, make this more specific, and combine it with other pseudo-selectors:

article p:first-of-type:first-line { font-feature-settings:"smcp"; }

With the addition of appropriate vendor prefixes for the font-feature-settings property, the declaration above would select the first line of the first paragraph in any article and render it in true small caps.

We can also use last-of-type to select the last instance of an element, and nth-child to select a numbered sequence of elements (for example, to zebra-stripe alternate rows of a table).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.