Part 5.2Advanced CSS pseudo selectors

This article covers even more pseudo-selectors, but these one are more complex than the previous ones.

First and last pseudo-selectors

These selectors are used to select the first and last elements.

First child

The first-child pseudo-selector is used on a parent element to select it's first child. This is a particularly useful pseudo-selector because for instance the first of two columns can be given a right margin.

The following example shows two columns, one with a different background to the other:

div.special div{
	background: #00f;
	width: 50%;
	height: 100px;
	float: left;
}
div.special:first-child{
	background: #f00;
}
								

The following HTML code is used here:

<div style="height:100px;background:green;">
	<div></div>
	<div></div>
<div></div>
								

Last child

The last-child pseudo-selector is used to select the last child of a parent element.

The last-child pseudo-selector is the opposite of the first-child pseudo-selector.

div.special div{
	background: #00f;
	width: 50%;
	height: 100px;
	float: left;
}
div.special:last-child{
	background: #f00;
}
								

The same HTML code is used here:

<div style="height:100px;">
	<div></div>
	<div></div>
<div></div>
								

First of type

The first-of-type pseudo-selector is used to select the first element of a type from within it's parent.

If a parent is not specified before the element, the element assumes that the parent element is the root node.

.special p:first-of-type{
	background: #0f0;
}
								

The HTML that will activate this pseudo-selector is this:

<div class="special">
	<p>This is the first of type paragraph</p>
	<p>This is the last of type paragraph</p>
</div>
								

Last of type

The last-of-type pseudo-selector works the opposite to the first-of-type pseudo-selector.

.special p:last-of-type{
	background: #0f0;
}
								

The same HTML that will activate this pseudo-selector is shown below:

<div class="special">
	<p>This is the first of type paragraph</p>
	<p>This is the last of type paragraph</p>
</div>
								

Text-related pseudo-selectors

There are just two text-related pseudo-selectors covered here, although there are more.

First letter

The first letter in a paragraph of text can be selected with a CSS pseudo-selector. It can be applied to any element provided it contains text.

The following example creates a drop capital letter for the first character of a paragraph.

p:first-child:first-letter{
	float: left;
	color: #f00;
	font-size: 75px;
	line-height: 60px;
	padding-top: 4px;
	padding-right: 8px;
	padding-left: 3px;
	font-family: Georgia;
}
								

<p>
	Hello world!
</p>
<p>
	This paragraph is not affected.
</p>
								

First line

In the same way as the first character can be affected by the first-letter pseudo-selector, the first-line pseudo-selector can style the first line of text.

This can be used to represent leading text to an article or section.

<p>
	Hello world!<br/>
	This text is not affected.
</p>
								

p:first-line{
	font-size: x-large;
}
								

Arithmetic and numerical pseudo-selectors

There are two different arithmetic pseudo-selectors and they both follow a specific structure that makes them very similar.

nth child

The nth child pseudo-selector is used to select an element that is within the boundaries of the arithmetic expression. To construct a pseudo-selector that use the nth-child selection:

#example:nth-child(n){
	font-size: x-large;
}
								

Changing n to a specific number will select just the nth element from all elements in the containing element.

For example,

#example p:nth-child(3){
	font-size: x-large;
}
								

<div id="example">
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
	<p>Paragraph 4</p>
	<p>Paragraph 5</p>
</div>
								

This will select the third paragraph element in the example element.

As well as being able to use a single integer value, arithmetic expressions can be used. For example:

• 4 + 2
• 2n
• 3n
• 3n + 2

The value n is given to represent any number that is a factor of the number it is bound to.

For the first example this would simply evaluate to 6. The second example would evaluate to 0, 2, 4, 6, 8, 10, 12, 14 and so on such that the number is a factor of 2, which would be every even number. 3n would evaluate to 0, 3, 6, 9, 12, 15, 18 and so on such that each number is a factor of 3. The last example will take all numbers which are factors of three plus 2, so it would give numbers 2 (since 3 x 0 + 2 is 2), 5, 8, 11, 15, 17.

The following example demonstrates 3n + 2.

#numeric p:nth-child(3n+2){
	font-size: x-large;
}
								

<div id="numeric">
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
	<p>Paragraph 4</p>
	<p>Paragraph 5</p>
	<p>Paragraph 6</p>
	<p>Paragraph 7</p>
	<p>Paragraph 8</p>
	<p>Paragraph 9</p>
	<p>Paragraph 10</p>
	<p>Paragraph 11</p>
	<p>Paragraph 12</p>
</div>
								

As well as supporting numeric values like this, it supports keywords odd and even to support odd and even numbers.

nth of type

In the same way as the nth-child pseudo-selector works, there exists an nth-of-type selector. This selector selects elements of a certain type with a certain number.

This is useful when selecting from a group of different elements:

#type div{
	margin: 20px 0;
}
#type p:nth-of-type(3){
	background: #ccc;
}
#type div:nth-of-type(2){
	background: #aaa;
}
								

<div id="type">
	<p>Paragraph 1</p>
	<div>Div 1</div>
	<div>Div 2</div>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
	<div>Div 3</div>
	<p>Paragraph 4</p>
	<div>Div 4</div>
	<p>Paragraph 5</p>
</div>
								

This will select the third paragraph element in the example element.

As with the nth-child selector, the nth of type selector can take a variety of the aforementioned arithmetic functions. It can also take the same keywords.

Content-related pseudo-elements

The final type of selectors introduced in this article are content-related.

Since CSS version 2, CSS has more active, non-styling properties that allow modification of the text in the page. One of these is the content property.

The content property

The content property allows the modification, or rather the addition of content to an element. This means less work in the HTML side of the development but it can also be used for the sake of special functionalities.

Before looking at these, it is important to understand the content CSS property.

This property adds text content to an element when it is rendered. It is the same as having HTML within the element except that it is limited to characters (including symbols) and cannot include images and so on.

Consider the following HTML:

<div class="section">
<div class="title">Welcome. </div>
<p>This is a section</p>
<div>

With the CSS content property, the title could be inserted automatically so the HTML looks like:

<div class="section">
<p>This is a section</p>
<div>

Before

The before selector will render the content before the main element is rendered.

#content-before:before{
  content: "Hello world!";
  border: 1px #aaa solid;
}

<div id="content-before">
  Main text
</div>

After

The after pseudo-selector is used to apply the opposite way to the way the before pseudo-selector works - it is rendered after the main element.

#content-after:after{
content: "Hello world!";
border: 1px #aaa solid;
}

<div id="content-after">
Main text
</div>