SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
Structural pseudo-classes allow you to select elements based on their position within the overall document structure.
When styling structural selectors, it is easy to get confused as to which element is being styled.
In the following example, the <em> element that is an only child is being styled, NOT the only child of the <em> element.
/* CSS selector */
em:only-child { }
<!-- HTML markup -->
<p>
<em></em>
</p>
<p>
<em></em> <span></span>
</p>
Four of the structural pseudo-class selectors include "(n)" as part of the syntax.
/* CSS selector */
:nth-child(n) { }
:nth-last-child(n) { }
:nth-of-type(n) { }
:nth-last-of-type(n) { }
Authors can use six different types of values inside these brackets.
/* syntax */
:nth-child(n) { }
:nth-child([integer]n) { }
:nth-child([integer]n+[integer]) { }
:nth-child([integer]n-[integer]) { }
:nth-child(odd) { }
:nth-child(even) { }
Let’s look at how the 3n, 3n+1 and 3n-1 work.
The n is an algebraic expression that represents a set of all integers, in this case starting at zero.
The value 3n is equivalent to (3 x n), which means it would target the following elements:
(3 x 0) = 0 = No element
(3 x 1) = 3 = 3rd element
(3 x 2) = 6 = 6th element
(3 x 3) = 9 = 9th element
The value 3n+1 is equivalent to (3 x n) + 1, which means it would target the following elements:
(3 x 0) + 1 = 1 = 1st element
(3 x 1) + 1 = 4 = 4rd element
(3 x 2) + 1 = 7 = 7th element
(3 x 3) + 1 = 10 = 10th element
The value 3n-1 is equivalent to (3 x n) - 1, which means it would target the following elements:
(3 x 0) - 1 = 0 = No element
(3 x 1) - 1 = 2 = 2nd element
(3 x 2) - 1 = 5 = 5th element
(3 x 3) - 1 = 8 = 8th element
The :first-child pseudo-class selector is written using an element followed by ":", followed by "first-child".
/* syntax */
E:first-child { }
/* example */
li:first-child { }
Whitespace is not permitted within the selector.
/* Valid */
li:first-child { }
/* Invalid */
li :first-child { }
The :first-child pseudo-class selector targets elements that are the first child of some other element.
In the following example, only the first <li> element will be selected.
/* CSS selector */
li:first-child { }
<!-- HTML markup -->
<ul>
<li> 1st child </li>
<li> 2nd child </li>
<li> 3rd child </li>
<li> 4th child </li>
</ul>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
CSS Level 2 (Revision 1)
Status: Recommendation
The :first-child selector is not supported in IE6. IE7 and IE8 have buggy support.
If an element is added dynamically as a first-child, IE7 does not update the styles to target this new element.
If an element is added dynamically as a first-child, IE8 will style the newly inserted first-child element and the old.
Open this HTML file in an editor:
exercises-start/exercise-205-07-01.html
Write a CSS rule to style an <li> element with a color value of sandybrown.
However, only style the first child of a parent that has a class of example.
/* Add styles here */
.example li:first-child {
color: sandybrown;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-01.html
The :last-child pseudo-class selector is written using an element followed by ":", followed by "last-child".
/* syntax */
E:last-child { }
/* example */
li:last-child { }
Whitespace is not permitted within the selector.
/* Valid */
li:last-child { }
/* Invalid */
li :last-child { }
The :last-child pseudo-class selector targets elements that are the last child of some other element.
In the following example, only the last <li> element will be selected.
/* CSS selector */
li:last-child { }
<!-- HTML markup -->
<ul>
<li> 4th last child </li>
<li> 3rd last child </li>
<li> 2nd last child </li>
<li> Last child </li>
</ul>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :last-child pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-02.html
Write a CSS rule to style an <li> element with a color value of rosybrown.
However, only style the last child of a parent that has a class of example.
/* Add styles here */
.example li:last-child {
color: rosybrown;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-02.html
The :only-child pseudo-class selector is written using an element followed by ":", followed by "only-child".
/* syntax */
E:only-child { }
/* example */
p em:only-child { }
Whitespace is not permitted within the selector.
/* Valid */
em:only-child { }
/* Invalid */
em :only-child { }
The :only-child pseudo-class selector targets elements that are the only child of some other element.
In the following example, any <em> that is an only child of a <p> will be selected.
/* CSS selector */
p em:only-child { }
<!-- HTML markup -->
<p>
<em></em>
</p>
<p>
<em></em> <span></span>
</p>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :only-child pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-03.html
Write a CSS rule to style the <p> element that is an only-child. Set with a color value of powderblue.
/* Add styles here */
.p:only-child {
color: powderblue;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-03.html
The :first-of-type pseudo-class selector is written using an element followed by ":", followed by "first-of-type".
/* syntax */
E:first-of-type { }
/* example */
p:first-of-type { }
Whitespace is not permitted within the selector.
/* Valid */
p:first-of-type { }
/* Invalid */
p :first-of-type { }
The :first-of-type pseudo-class selector targets elements that are the first of its type within a parent.
In the following example, only the first <p> element within a parent with a class of main will be selected.
/* CSS selector */
.main p:first-of-type { }
<!-- HTML markup -->
<div class="main">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :first-of-type pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-04.html
Write a CSS rule to style the <p> element with a color value of peachpuff. However, only style the first of its type.
/* Add styles here */
p:first-of-type {
color: peachpuff;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-04.html
The :last-of-type pseudo-class selector is written using an element followed by ":", followed by "last-of-type".
/* syntax */
E:last-of-type { }
/* example */
p:last-of-type { }
Whitespace is not permitted within the selector.
/* Valid */
p:last-of-type { }
/* Invalid */
p :last-of-type { }
The :last-of-type pseudo-class selector targets elements that are the last of its type within a parent.
In the following example, only the last <p> element within a parent with a class of main will be selected.
/* CSS selector */
.main p:last-of-type { }
<!-- HTML markup -->
<div class="main">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :last-of-type pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-05.html
Write a CSS rule to style the <p> element with a color value of paleturquoise. However, only style the last of its type.
/* Add styles here */
p:last-of-type {
color: paleturquoise;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-05.html
The :only-of-type pseudo-class selector is written using an element followed by ":", followed by "only-of-type".
/* syntax */
E:only-of-type { }
/* example */
p:only-of-type { }
Whitespace is not permitted within the selector.
/* Valid */
p:only-of-type { }
/* Invalid */
p :only-of-type { }
The :only-of-type pseudo-class selector targets elements that are the only element of its type within a parent.
In the following example, the <p> that is the only element of its type within a parent with a class of main will be selected.
/* CSS selector */
.main p:only-of-type { }
<!-- HTML markup -->
<div class="main">
<div>Content</div>
<div>Content</div>
<p>Content</p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :only-of-type pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-06.html
Write a CSS rule to style the <p> element with a color value of mistyrose.
However, only style the element if it is the only one of its type.
/* Add styles here */
p:only-of-type {
color: mistyrose;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-06.html
The :nth-child pseudo-class selector is written using an element followed by ":", followed by "nth-child", followed by brackets.
The brackets can contain six different types of values.
/* syntax */
E:nth-child(n) { }
/* example */
li:nth-child(4) { }
Whitespace is not permitted within the selector.
/* Valid */
li:nth-child { }
/* Invalid */
li :nth-child { }
The :nth-child pseudo-class selector targets specific child elements within the parent.
The six different types of values used inside the brackets dictate which child elements will be targeted.
Option 1: The brackets can contain an integer value. In the example below, the selector targets only the third <li> child element.
/* CSS selector */
li:nth-child(3) { }
<ul>
<li> 1st child </li>
<li> 2nd child </li>
<li> 3rd child </li>
<li> 4rd child </li>
<li> 5th child </li>
<li> 6th child </li>
<li> 7th child </li>
<li> 8th child </li>
<li> 8th child </li>
</ul>
Option 2: The brackets can contain an integer value and the letter "n".
/* CSS selector */
li:nth-child(3n) { }
/*
(3 x 0) = 0 = No element
(3 x 1) = 3 = 3rd element
(3 x 2) = 6 = 6th element
(3 x 3) = 9 = 9th element
(3 x 4) = 12 = 12th element
(3 x 5) = 15 = 15th element
*/
<ul>
<li> 1st child </li>
<li> 2nd child </li>
<li> 3rd child </li>
<li> 4th child </li>
<li> 5th child </li>
<li> 6th child </li>
<li> 7th child </li>
<li> 8th child </li>
<li> 9th child </li>
</ul>
Option 3: The brackets can contain an integer value, the letter "n", a plus "(+)" symbol and another integer value.
/* CSS selector */
li:nth-child(3n+1) { }
/*
(3 x 0) + 1 = 1 = 1st element
(3 x 1) + 1 = 4 = 4th element
(3 x 2) + 1 = 7 = 6th element
(3 x 3) + 1 = 10 = 10th element
(3 x 4) + 1 = 13 = 13th element
(3 x 5) + 1 = 16 = 16th element
*/
<ul>
<li> 1st child </li>
<li> 2nd child </li>
<li> 3rd child </li>
<li> 4th child </li>
<li> 5th child </li>
<li> 6th child </li>
<li> 7th child </li>
<li> 8th child </li>
<li> 9th child </li>
</ul>
Option 4: The brackets can contain an integer value, the letter "n", a minus "(-)" symbol and another integer value.
/* CSS selector */
li:nth-child(3n-1) { }
/*
(3 x 0) - 1 = -1 = No element
(3 x 1) - 1 = 2 = 2nd element
(3 x 2) - 1 = 5 = 5th element
(3 x 3) - 1 = 8 = 8th element
(3 x 4) - 1 = 11 = 11th element
(3 x 5) - 1 = 14 = 14th element
*/
<ul>
<li> 1st child </li>
<li> 2nd child </li>
<li> 3rd child </li>
<li> 4th child </li>
<li> 5th child </li>
<li> 6th child </li>
<li> 7th child </li>
<li> 8th child </li>
<li> 9th child </li>
</ul>
Option 5: The brackets can contain the "even" keyword.
/* CSS selector */
li:nth-child(even) { }
<ul>
<li></li>
<li> even </li>
<li></li>
<li> even </li>
<li></li>
<li> even </li>
<li></li>
<li> even </li>
<li></li>
</ul>
Option 6: The brackets can contain the "odd" keyword.
/* CSS selector */
li:nth-child(odd) { }
<ul>
<li> odd </li>
<li></li>
<li> odd </li>
<li></li>
<li> odd </li>
<li></li>
<li> odd </li>
<li></li>
<li> odd </li>
</ul>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :nth-child pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-07.html
Write a CSS rule to style the third only <li> within a parent with a class of one.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.one li:nth-child(3) {
color: lightsteelblue;
}
Write a second CSS rule to style every third <li> within a parent with a class of two.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.two li:nth-child(3n) {
color: lightsteelblue;
}
Write a third CSS rule to style every third <li> (starting one forward) within a parent with a class of three.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.three li:nth-child(3n+1) {
color: lightsteelblue;
}
Write a fourth CSS rule to style every third <li> (starting one backwards) within a parent with a class of four.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.four li:nth-child(3n-1) {
color: lightsteelblue;
}
Write a fifth CSS rule to style every even <li> within a parent with a class of five.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.five li:nth-child(even) {
color: lightsteelblue;
}
Write a sixth CSS rule to style every odd <li> within a parent with a class of six.
Set the color value for this rule to lightsteelblue.
/* Add styles here */
.six li:nth-child(odd) {
color: lightsteelblue;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-07.html
The :nth-last-child pseudo-class selector is written using an element followed by ":", followed by "nth-last-child", followed by brackets.
The brackets can contain six different types of values.
/* syntax */
E:nth-last-child(n) { }
/* example */
li:nth-last-child(4) { }
Whitespace is not permitted within the selector.
/* Valid */
li:nth-last-child { }
/* Invalid */
li :nth-last-child { }
The :nth-last-child pseudo-class selector targets specific child elements within the parent.
The six different types of values used inside the brackets dictate which child elements will be targeted.
Option 1: The brackets can contain an integer value. In the example below, the selector targets only the third <li> child element.
/* CSS selector */
li:nth-last-child(3) { }
<ul>
<li> 9th last child </li>
<li> 8th last child </li>
<li> 7th last child </li>
<li> 6th last child </li>
<li> 5th last child </li>
<li> 4th last child </li>
<li> 3rd last child </li>
<li> 2nd last child </li>
<li> Last child </li>
</ul>
Option 2: The brackets can contain an integer value and the letter "n".
/* CSS selector */
li:nth-last-child(3n) { }
/*
(3 x 0) = 0 = No element
(3 x 1) = 3 = 3rd last element
(3 x 2) = 6 = 6th last element
(3 x 3) = 9 = 9th last element
(3 x 4) = 12 = 12th last element
(3 x 5) = 15 = 15th last element
*/
<ul>
<li> 9th last child </li>
<li> 8th last child </li>
<li> 7th last child </li>
<li> 6th last child </li>
<li> 5th last child </li>
<li> 4th last child </li>
<li> 3rd last child </li>
<li> 2nd last child </li>
<li> Last child </li>
</ul>
Option 3: The brackets can contain an integer value, the letter "n", a plus "(+)" symbol and another integer value.
/* CSS selector */
li:nth-last-child(3n+1) { }
/*
(3 x 0) + 1 = 1 = Last element
(3 x 1) + 1 = 4 = 4th last element
(3 x 2) + 1 = 7 = 6th last element
(3 x 3) + 1 = 10 = 10th last element
(3 x 4) + 1 = 13 = 13th last element
(3 x 5) + 1 = 16 = 16th last element
*/
<ul>
<li> 9th last child </li>
<li> 8th last child </li>
<li> 7th last child </li>
<li> 6th last child </li>
<li> 5th last child </li>
<li> 4th last child </li>
<li> 3rd last child </li>
<li> 2nd last child </li>
<li> Last child </li>
</ul>
Option 4: The brackets can contain an integer value, the letter "n", a minus "(-)" symbol and another integer value.
/* CSS selector */
li:nth-last-child(3n-1) { }
/*
(3 x 0) - 1 = -1 = No element
(3 x 1) - 1 = 2 = 2nd last element
(3 x 2) - 1 = 5 = 5th last element
(3 x 3) - 1 = 8 = 8th last element
(3 x 4) - 1 = 11 = 11th last element
(3 x 5) - 1 = 14 = 14th last element
*/
<ul>
<li> 9th last child </li>
<li> 8th last child </li>
<li> 7th last child </li>
<li> 6th last child </li>
<li> 5th last child </li>
<li> 4th last child </li>
<li> 3rd last child </li>
<li> 2nd last child </li>
<li> Last child </li>
</ul>
Option 5: The brackets can contain the "even" keyword.
/* CSS selector */
li:nth-last-child(even) { }
<ul>
<li> 9th last child </li>
<li> even </li>
<li> 7th last child </li>
<li> even </li>
<li> 5th last child </li>
<li> even </li>
<li> 3rd last child </li>
<li> even </li>
<li> Last child </li>
</ul>
Option 6: The brackets can contain the "odd" keyword.
/* CSS selector */
li:nth-last-child(odd) { }
<ul>
<li> odd </li>
<li> 8th last child </li>
<li> odd </li>
<li> 6th last child </li>
<li> odd </li>
<li> 4th last child </li>
<li> odd </li>
<li> 2nd last child </li>
<li> odd </li>
</ul>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :nth-last-child pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-08.html
Write a CSS rule to style the third last only <li> within a parent with a class of one.
Set the color value for this rule to mediumblue.
/* Add styles here */
.one li:nth-last-child(3) {
color: mediumblue;
}
Write a second CSS rule to style every third <li> within a parent with a class of two - starting from the last child.
Set the color value for this rule to mediumblue.
/* Add styles here */
.two li:nth-last-child(3n) {
color: mediumblue;
}
Write a third CSS rule to style every third <li> (starting one forward) within a parent with a class of three - starting from the last child.
Set the color value for this rule to mediumblue.
/* Add styles here */
.three li:nth-last-child(3n+1) {
color: mediumblue;
}
Write a fourth CSS rule to style every third <li> (starting one backwards) within a parent with a class of four - starting from the last child.
Set the color value for this rule to mediumblue.
/* Add styles here */
.four li:nth-last-child(3n-1) {
color: mediumblue;
}
Write a fifth CSS rule to style every even <li> within a parent with a class of five - starting from the last child.
Set the color value for this rule to mediumblue.
/* Add styles here */
.five li:nth-last-child(even) {
color: mediumblue;
}
Write a sixth CSS rule to style every odd <li> within a parent with a class of six - starting from the last child.
Set the color value for this rule to mediumblue.
/* Add styles here */
.six li:nth-last-child(odd) {
color: mediumblue;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-08.html
The :nth-of-type pseudo-class selector is written using an element followed by ":", followed by "nth-of-type", followed by brackets.
The brackets can contain six different types of values.
/* syntax */
E:nth-of-type(n) { }
/* example */
li:nth-of-type(4) { }
Whitespace is not permitted within the selector.
/* Valid */
li:nth-of-type(4) { }
/* Invalid */
li :nth-of-type (4) { }
The :nth-of-type pseudo-class selector targets specific child elements within the parent.
The six different types of values used inside the brackets dictate which child elements will be targeted.
Option 1: The brackets can contain an integer value.
/* CSS selector */
p:nth-of-type(3) { }
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
Option 2: The brackets can contain an integer value and the letter "n".
/* CSS selector */
p:nth-of-type(3n) { }
/*
(3 x 0) = 0 = No element
(3 x 1) = 3 = 3rd <p> element
(3 x 2) = 6 = 6th <p> element
(3 x 3) = 9 = 9th <p> element
(3 x 4) = 12 = 12th <p> element
(3 x 5) = 15 = 15th <p> element
*/
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
Option 3: The brackets can contain an integer value, the letter "n", a plus "(+)" symbol and another integer value.
/* CSS selector */
p:nth-of-type(3n+1) { }
/*
(3 x 0) + 1 = 1 = 1st <p> element
(3 x 1) + 1 = 4 = 4th <p> element
(3 x 2) + 1 = 7 = 6th <p> element
(3 x 3) + 1 = 10 = 10th <p> element
(3 x 4) + 1 = 13 = 13th <p> element
(3 x 5) + 1 = 16 = 16th <p> element
*/
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
Option 4: The brackets can contain an integer value, the letter "n", a minus "(-)" symbol and another integer value.
/* CSS selector */
p:nth-of-type(3n-1) { }
/*
(3 x 0) - 1 = -1 = No element
(3 x 1) - 1 = 2 = 2nd <p> element
(3 x 2) - 1 = 5 = 5th <p> element
(3 x 3) - 1 = 8 = 8th <p> element
(3 x 4) - 1 = 11 = 11th <p> element
(3 x 5) - 1 = 14 = 14th <p> element
*/
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
Option 5: The brackets can contain the "even" keyword.
/* CSS selector */
p:nth-of-type(even) { }
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
Option 6: The brackets can contain the "odd" keyword.
/* CSS selector */
p:nth-of-type(odd) { }
<div>
<p> 1st of type </p>
<p> 2nd of type</p>
<div></div>
<p> 3rd of type </p>
<p> 4th of type </p>
<p> 5th of type </p>
<div></div>
<p> 6th of type </p>
<p> 7th of type </p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :nth-of-type pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-09.html
Write a CSS rule to style the third only <p> within a parent with a class of one.
Set the color value for this rule to lightpink.
/* Add styles here */
.one p:nth-of-type(3) {
color: lightpink;
}
Write a second CSS rule to style every third <p> within a parent with a class of two.
Set the color value for this rule to lightpink.
/* Add styles here */
.two p:nth-of-type(3n) {
color: lightpink;
}
Write a third CSS rule to style every third <p> (starting one forward) within a parent with a class of three.
Set the color value for this rule to lightpink.
/* Add styles here */
.three p:nth-of-type(3n+1) {
color: lightpink;
}
Write a fourth CSS rule to style every third <p> (starting one backwards) within a parent with a class of four.
Set the color value for this rule to lightpink.
/* Add styles here */
.four p:nth-of-type(3n-1) {
color: lightpink;
}
Write a fifth CSS rule to style every even <p> within a parent with a class of five.
Set the color value for this rule to lightpink.
/* Add styles here */
.five p:nth-of-type(even) {
color: lightpink;
}
Write a sixth CSS rule to style every odd <p> within a parent with a class of six.
Set the color value for this rule to lightpink.
/* Add styles here */
.six p:nth-of-type(odd) {
color: lightpink;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-09.html
The :nth-last-of-type pseudo-class selector is written using an element followed by ":", followed by "nth-last-of-type", followed by brackets.
The brackets can contain six different types of values.
/* syntax */
E:nth-last-of-type(n) { }
/* example */
li:nth-last-of-type(4) { }
Whitespace is not permitted within the selector.
/* Valid */
li:nth-last-of-type(4) { }
/* Invalid */
li :nth-last-of-type (4) { }
The :nth-last-of-type pseudo-class selector targets specific child elements within the parent.
The six different types of values used inside the brackets dictate which child elements will be targeted.
Option 1: The brackets can contain an integer value.
/* CSS selector */
p:nth-last-of-type(3) { }
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
Option 2: The brackets can contain an integer value and the letter "n".
/* CSS selector */
p:nth-last-of-type(3n) { }
/*
(3 x 0) = 0 = No element
(3 x 1) = 3 = 3rd last <p> element
(3 x 2) = 6 = 6th last <p> element
(3 x 3) = 9 = 9th last <p> element
(3 x 4) = 12 = 12th last <p> element
(3 x 5) = 15 = 15th last <p> element
*/
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
Option 3: The brackets can contain an integer value, the letter "n", a plus "(+)" symbol and another integer value.
/* CSS selector */
p:nth-last-of-type(3n+1) { }
/*
(3 x 0) + 1 = 1 = 1st last <p> element
(3 x 1) + 1 = 4 = 4th last <p> element
(3 x 2) + 1 = 7 = 6th last <p> element
(3 x 3) + 1 = 10 = 10th last <p> element
(3 x 4) + 1 = 13 = 13th last <p> element
(3 x 5) + 1 = 16 = 16th last <p> element
*/
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
Option 4: The brackets can contain an integer value, the letter "n", a minus "(-)" symbol and another integer value.
/* CSS selector */
p:nth-last-of-type(3n-1) { }
/*
(3 x 0) - 1 = -1 = No element
(3 x 1) - 1 = 2 = 2nd last <p> element
(3 x 2) - 1 = 5 = 5th last <p> element
(3 x 3) - 1 = 8 = 8th last <p> element
(3 x 4) - 1 = 11 = 11th last <p> element
(3 x 5) - 1 = 14 = 14th last <p> element
*/
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
Option 5: The brackets can contain the "even" keyword.
/* CSS selector */
p:nth-last-of-type(even) { }
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
Option 6: The brackets can contain the "odd" keyword.
/* CSS selector */
p:nth-last-of-type(odd) { }
<div>
<p> 7th last of type </p>
<p> 6th last of type</p>
<div></div>
<p> 5th last of type </p>
<p> 4th last of type </p>
<p> 3rd last of type </p>
<div></div>
<p> 2nd last of type </p>
<p> Last of type </p>
</div>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :nth-last-of-type pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-10.html
Write a CSS rule to style the third last <p> only within a parent with a class of one.
Set the color value for this rule to khaki.
/* Add styles here */
.one p:nth-last-of-type(3) {
color: khaki;
}
Write a second CSS rule to style every third <p> within a parent with a class of two - starting from the last child.
Set the color value for this rule to khaki.
/* Add styles here */
.two p:nth-last-of-type(3n) {
color: khaki;
}
Write a third CSS rule to style every third <p> (starting one forward) within a parent with a class of three - starting from the last child.
Set the color value for this rule to khaki.
/* Add styles here */
.three p:nth-last-of-type(3n+1) {
color: khaki;
}
Write a fourth CSS rule to style every third <p> (starting one backwards) within a parent with a class of four - starting from the last child.
Set the color value for this rule to khaki.
/* Add styles here */
.four p:nth-last-of-type(3n-1) {
color: khaki;
}
Write a fifth CSS rule to style every even <p> within a parent with a class of five - starting from the last child.
Set the color value for this rule to khaki.
/* Add styles here */
.five p:nth-last-of-type(even) {
color: khaki;
}
Write a sixth CSS rule to style every odd <p> within a parent with a class of six - starting from the last child.
Set the color value for this rule to khaki.
/* Add styles here */
.six p:nth-last-of-type(odd) {
color: khaki;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-10.html
The :root pseudo-class selector is written using a ":", followed by "root".
/* syntax */
:root { }
Whitespace is not permitted within the selector.
/* Valid */
:root { }
/* Invalid */
: root { }
The :root pseudo-class selector targets the document root element.
In HTML documents, the root element is always the <html> element.
In the following example, the <html> element will be selected.
/* CSS selector */
:root { }
<!-- HTML markup -->
<!doctype html>
<html>
<head>
<title>Title - site name</title>
</head>
<body>
</body>
</html>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :root pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-11.html
Write a CSS rule to style the <root> element. Set the color value to yellowgreen.
/* Add styles here */
:root {
color: yellowgreen;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-11.html
The :empty pseudo-class selector is written using an element, followed by ":", followed by "empty".
/* syntax */
E:empty { }
/* example */
p:empty { }
Whitespace is not permitted within the selector.
/* Valid */
p:empty { }
/* Invalid */
p: empty { }
The :empty pseudo-class selector targets elements that have no children (including character spaces).
In the following example, only the empty <p> element will be selected.
The <p> that does not contain content, but does contain a character space, will not be selected as it is not considered empty.
/* CSS selector */
p:empty { }
<!-- HTML markup -->
<p>Content</p>
<p></p>
<p>Content</p>
<p> </p>
W3C Selectors Level 4
Status: Working Draft
Selectors Level 3
Status: Recommendation
The :empty pseudo-class selector is not supported by IE6, IE7 or IE8.
Open this HTML file in an editor:
exercises-start/exercise-205-07-12.html
Write a CSS rule to style any empty <p> elements. Set with border: 1px solid red.
/* Add styles here */
p:empty {
border: 1px solid red;
}
Check your work against the finished HTML file:
exercises-finished/exercise-205-07-12.html
Site Twitter Github Slideshare Linkedin