


This article covers even more pseudo-selectors, but these one are more complex than the previous ones.
These selectors are used to select the first and last elements.
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;"> <div></div> <div></div> <div></div>
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>
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>
This is the first of type paragraph
This is the last of type paragraph
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>
This is the first of type paragraph
This is the last of type paragraph
There are just two text-related pseudo-selectors covered here, although there are more.
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>
Hello world!
This paragraph is not affected.
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;
}
Hello world!
This text is not affected.
There are two different arithmetic pseudo-selectors and they both follow a specific structure that makes them very similar.
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.
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
As well as being able to use a single integer value, arithmetic expressions can be used. For example:
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>
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Paragraph 6
Paragraph 7
Paragraph 8
Paragraph 9
Paragraph 10
Paragraph 11
Paragraph 12
As well as supporting numeric values like this, it supports keywords odd
and even
to support odd and even numbers.
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.
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
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.
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 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>
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>
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>
![]() | Happy New Year everyone! #2021NewYear 26 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 26 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 26 days ago |