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 {

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