August 8, 2016

:first-child, :nth-child, and :nth-of-type Pseudo-Classes

first-child, nth-child, and nth-of-type

The :first-child, :nth-child, and :nth-of-type Pseudo-Classes

Continuing on with our PSEUDO-CLASS lessons, we will work with the :first-child, :nth-child, and :nth-of-type pseudo-classes. The first-child pseudo-class selects a specified ELEMENT that is the first child of another element. Let’s use it in an example to better explain. See the images below.

index.html Example 1: :first-child

:first-child html

my-styles.css Example 1: :first-child

first-child pseudo-class css

Displayed Page Example 1

first-child pseudo-selector display

In the index.html document, we create four P ELEMENTS. We’re using p elements in our exercises to simplify the lessons as much as possible. The my-styles.css stylesheet has one CSS rule with a selector of p:first-child. This will select any p element that is the first child of ANY element. So, looking at our Displayed Page from Example 1, we see that the first paragraph has red text as specified in our CSS rule. This is because it is the first child p element of the body element. NOTE: In order for most of the pseudo-classes to work in certain versions of Internet Explorer; a doctype needs to be specified. Also, some old versions won’t support them at all.

Moving on from our first-child example, let’s work with the nth-child pseudo-class. See the images below, and then we’ll discuss what is happening.

index.html Example 2: :nth-child(n)

:nth-child html

my-styles.css Example 2: :nth-child(n)

nth-child pseudo-class css

Displayed Page Example 2

nth child display

The :nth-child(n) pseudo-class SELECTOR targets/selects every element that is the nth child of its parent, regardless of the type of other elements around it. Look at the n in parenthesis as a placeholder. The nth is an index number that you will specify where the n variable is. You should start to understand this more as we move along. The n is replaced with either a number, keyword, or even a mathematical formula. In Example 2, we have not changed the html. but in the my-styles.css stylesheet, we have another CSS rule with a pseudo-class. The selector or basically our target is p:nth-child(even). We have used the keyword “even“, so we are targeting every element with an even numbered index. The first paragraph element has an index of 1; the second paragraph element has an index of 2, and so on. Looking at our Displayed Page Example 2, the second and fourth elements were selected and now have a background COLOR of gray. To try to sum up what we’re doing here in a more simplified explanation, we are targeting ALL of the p elements that have an even index of its parent. Let’s add some more html elements in the next example. The CSS will be unchanged. See the images below.

index.html Example 3: p:nth-child(even)

:nth-child(even) html

Displayed Page Example 3

nth-child display

With the addition of html HEADING and PARAGRAPH elements, the p:nth-child(even) pseudo-class becomes more clear, and to make it even more obvious, I have added the index number in parenthesis for each html element. In our Displayed Page Example 3, we have targeted and added a background color of gray to the paragraph with an index of 2, and the paragraph with an index of 6. Remember, the p:nth-child(even) will target ALL child p elements with an even index number. It has to be a p element because we specified that in the selector with p:nth-child(even). Because type doesn’t matter, the p elements with the indexes of 3, 5, and 9 are not affected. We have one more pseudo-class to learn about in this lesson, and that is the :nth-of-type. See the images below, and try to figure out what is happening before we discuss it. P.S. The index.html is unchanged.

my-styles.css Example 4: p:nth-of-type(odd)

:nth-of-type css

Displayed Page Example 4: p:nth-of-type(odd)

nth-of-type display

There is a lot to discuss in our final exercise. We have added a CSS rule with a selector of p:nth-of-type(odd) to our my-styles.css stylesheet. This rule will make the background color blue for the targeted elements (odd index numbers). I have not changed the previous index numbers. Can you figure out why the elements with a blue background in our Displayed Page Example 4 were selected? The :nth-of-type(n) pseudo-class targets every element that is the nth child, of a specified type, of its parent. In our case, the type is p. So the index numbers that were included in our document from the previous example are irrelevant. They are the index numbers for the child elements of body. The p:nth-of-type(odd) is targeting a particular type, which is p elements. So, the index numbers change. The 1st, 3rd, and 5th paragraphs were targeted because they are 1: p elements, and 2: have odd index numbers. You should also notice that the first paragraph elements background color was overridden from gray to blue. This is because of the order in which we wrote our CSS rules. You can get a quick example of OVERRIDING by moving the p:nth-of-type(odd) rule above the p:nth-child(even) rule.

There are many pseudo-classes available to use. Things like LINKS, input fields in forms, and specific elements can easily be targeting with a pseudo-class. Refer to the pseudo-class list below for examples and brief explanations.

List Of CSS Pseudo-Classes

:link
Selects all unvisited links
:visited
Selects all visited links
:hover
Selects a link that is moused over
:active
Selects the active link
:focus
Select the <input> element that has focus. EXAMPLE: An input box that is clicked on has focus
:checked
Selects all checked <input> elements
:disabled
Selects all disabled <input> elements
:enabled
Selects all enabled <input> elements
:in-range
Selects <input> elements that have a value within a specified range
:invalid
Selects all <input> elements that have an invalid value
:optional
Selects <input> elements that DO NOT have a “required” attribute
:out-of-range
Selects <input> elements that have a value outside of a specified range
:read-only
Selects <input> elements that have a “readonly” attribute specified
:read-write
Selects <input> elements that DO NOT have a “readonly” attribue
:required
Selects <input> elements that have the “required” attribute specified
:valid
Selects all <input> fields with a valid value
:empty
EXAMPLE: p:empty Selects all p elements that have no children
:first-child
EXAMPLE: p:first-child Selects all p elements that are the first child of its parent
:first-of-type
EXAMPLE: p:first-of-type Selects all p elements that are the first p elements of its parent
:lang (language)
EXAMPLE: p:lang(fr) Selects all p elements with a lang attribute value starting with “fr”
:last-child
EXAMPLE: p:last-child Selects all p elements that are the last child of its parent
:last-of-type
EXAMPLE: p:last-of-type Selects all p elements that are the last p element of its parent
:only-of-type
EXAMPLE: p:only-of-type Selects all p elements that are the only p element of its parent
:only-child
EXAMPLE: p:only-child Selects all p elements that are the only child of its parent
:not(selector)
EXAMPLE: :not(p) Selects all elements that are NOT p elements
:nth-child(n)
EXAMPLE: p:nth-child(2) Selects all p elements that are the second child of its parent
:nth-last-child(n)
EXAMPLE: p:nth-last-child(2) Selects all p elements that are the second child of its parent, counting FROM the last child
:nth-last-of-type(n)
EXAMPLE: p:nth-last-of-type(2) Selects all p elements that are the second p element of its parent, counting FROM the last child
:nth-of-type(n)
EXAMPLE: p:nth-of-type(2) Selects all p elements that are the second p elements of its parent
:only-of-type
EXAMPLE: p:only-of-type Selects all p elements that are the only p elements of its parent
:only-child
EXAMPLE: p:only-child Selects all p elements that are the only child of its parent
:root
Selects the documents root element
:target
EXAMPLE: #tips:target Selects the current active #tips element (clicked on a URL containing that anchor name)

That’s it for this lesson on pseudo-classes. You should try to work with some of the pseudo-classes above to better understand them. The more you use them the better you’ll understand how they work and what they can be used for. This may have been somewhat of a confusing lesson, but practice and first-hand experience will make you more comfortable with pseudo-classes. Being able to target very specific parts of your web page is very important and will prove to be very useful when working on large projects in the future. Thanks for reading, I’ll see you next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>:first-child, :nth-child, and :nth-of-type</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<h1>First Heading element (index of 1)</h1>
<p>First paragraph element. (index of 2)</p>
<p>Second paragraph element. (index of 3)</p>

<h2>Second Heading element (index of 4)</h2>
<p>Third paragraph element. (index of 5)</p>
<p>Fourth paragraph element. (index of 6)</p>

<h3>Third Heading element (index of 7)</h3>
<h4>Fourht Heading element (index of 8)</h4>

<p>Fifth paragraph element. (index of 9)</p>

</body>
</html>

my-styles.css Source Code


p:first-child {
color: red;
}

p:nth-child(even) {
background-color: gray;
}

p:nth-of-type(odd) {
background-color: blue;
}

Clear Coded Programming

Please Leave a comment