TUTORIALS 11 MIN READ12TH NOVEMBER 2019

Demystifying CSS Pseudo-Classes (:nth-

child vs. :nth-of-type)
Styles are applied to a web page using CSS selectors; selectors which make it
possible for you to target a […]

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Styles are applied to a web page using CSS selectors; selectors which make it possible for you
to target a specific element or sets of elements. Usually, when you are starting with CSS,
you’ll make use of element selectors before pivoting to use classes and IDs.

As powerful as these selectors are, they can be quite limiting, making it impossible to select
an element based on its state. If you’ve ever worked with frontend frameworks like React
and Vue, you possibly understand what state means. I am not referring to the overall state of
the application, but the state of elements within the HTML code.

The humble link is a simple example–it can be created using an anchor tag <a> . The link
can then have different states:

before the link is clicked

when a user hovers a mouse cursor over the link

when the link has been visited

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Selectors used to target elements depending on their state are called pseudo-classes. nth-
child and nth-of-type are pseudo-classes which select an element based on its position

(the position of the element is also considered a state). Let’s take a closer look.

How to Work with :nth-child()

The nth-child pseudo-class is used to select an element based on its position in a list of
siblings. There are things to take note of here:

Siblings: where a parent and children elements are present. In selecting a sibling
you’re trying to target a specific child of the chosen parent. A  ul and bunch of li
are examples of parent and children elements.

The position of the element in the list of its siblings is determined by values that are
passed to the pseudo-class.
● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 We’ll be making use of the HTML code below to learn how  nth-child works.

<ul>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
</ul>

There are two different ways of specifying the position of the element: the use of keywords
and functional notations.

:nth-child(even/odd)

If using keywords you can specify elements whose position is either an even or an odd
● Posted on 12th November 2019  COMMENTS  SHARE
number, like this:

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 ul :nth-child(even) {
color: red;
}

ul :nth-child(odd) {
color: gray;
}

This gives us the following:

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

ul :nth-child(even) { Ruby
color: red; Python
} JavaScript
Go
ul :nth-child(odd) { PHP
color: gray;
Scala
}
Java
Kotlin
C++
C

Resources 1× 0.5× 0.25× Rerun

:nth-child(2)

When we specify a particular number (like the 2 in this example), we’re selecting the
element in the list of siblings whose position matches the number we’ve passed. Here we’re
targeting the second child of the unordered list.
● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 ul {
color: gray;
}

ul :nth-child(2) {
color: red;
}

You can probably imagine what the result looks like:

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

ul { Ruby
color: gray; Python
} JavaScript
Go
ul :nth-child(2) { PHP
color: red;
Scala
}
Java
Kotlin
C++
C

Resources 1× 0.5× 0.25× Rerun

One common pitfall here is after specifying the element, you might add a new element (like
a heading) to the parent without realising the selected element will change. To show this,
let’s add a heading to the list like this:

● Posted on 12th November 2019

<ul>  COMMENTS  SHARE
<h3>Programming Languages</h3>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 <li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
</ul>

Even though this is actually invalid use of HTML, browsers will still render it fine, and in this
case the first  li  element will be selected as it is now the second child of the unordered list.

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

ul {
color: gray;
Programming Languages
}
Ruby
ul :nth-child(2) { Python
color: red; JavaScript
} Go
PHP
Scala
Java
Kotlin
C++
C

Resources 1× 0.5× 0.25× Rerun

:nth-child(An)

Okay, now we’re taking it up a notch. Here the elements (plural) we select will be

determined using functional notation.  n  denotes a counter and   A  represents the size of

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 the cycle, giving us a sequence. For example, when we pass 2, it will select elements in the
sequence 2, 4, 6, and so on:

ul :nth-child(2n) {
color: red;
}

To see it in action, let’s go back to our HTML code and add a few items to the list. We’ll also
make the list an ordered list so that we can clearly see the items’ numbers:

<ol>
<li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<li>Scala</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
<li>Cobol</li>
● Posted on 12th November 2019
<li>Fortran</li>  COMMENTS  SHARE
</ol>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Our result is as follows:

EDIT ON
HTML CSS Result

ol { 1. Ruby
color: gray; 2. Python
} 3. JavaScript
4. Go
ol :nth-child(2n) { 5. PHP
color: red;
6. Scala
}
7. Java
8. Kotlin
9. C++
10. C
11. Cobol
12. Fortran

Resources 1× 0.5× 0.25× Rerun

●
:nth-child(An+B)
Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Here we’ve added an extra calculation to our cycles: +B . The elements whose position in
the list of siblings matches the pattern will get selected. We need to know how the
calculation happens, so let’s try a functional notation like this:

ol {
color: gray;
}

ol :nth-child(3n+1) {
color: red;
}

This will select the items whose position matches 1, 4, 7, 10, and so on:

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

ol { 1. Ruby
color: gray; 2. Python
} 3. JavaScript
4. Go
ol :nth-child(3n+1) { 5. PHP
color: red;
6. Scala
}
7. Java
8. Kotlin
9. C++
10. C
11. Cobol
12. Fortran

Resources 1× 0.5× 0.25× Rerun

The calculation starts counting from 0 , which is the default value of n , and as such the
elements to be styled will be calculated like this:

First Element: 3(0) + 1 = 1 .

● Posted on 12th November

Second2019
Element: 3(1) + 1 = 4 .  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Third Element: 3(2) + 1 = 7 .

Fourth Element: 3(3) + 1 = 10 .

Think of it as an algebraic equation where the value of n increases arithmetically, and the
element to be styled is the result of the equation. Here is another example, which you can
edit yourself to see what happens:

ol :nth-child(3n+2) {
color: red;
}

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

LIVE
ol { 1. Ruby
 color: gray; 2. Python
} 3. JavaScript
4. Go
ol :nth-child(3n+2) { 5. PHP
 color: red; 6. Scala
} 7. Java
8. Kotlin
9. C++
10. C
11. Cobol
12. Fortran

Resources 1× 0.5× 0.25× Rerun

You can also use this method to select even numbers, using the formula:

ol :nth-child(2n+0) {
color: red;
}
● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 And odd numbers can be selected using:

ol :nth-child(2n+1) {
color: red;
}

How to Work with :nth-of-type()

In all the examples we have seen for the  nth-child  pseudo-class, it is important to note that
the goal is to select elements in a list of siblings. This does not take into account the
element type. To ensure the selection is also scoped to a particular type, we can make use of
the  nth-of-type  pseudo-class.

To see this at work let’s edit the HTML code to look like this (again, this is technically misuse
of HTML, but browsers will interpret it just fine):

● Posted on 12th November 2019

<ol>  COMMENTS  SHARE
<p>This is a first paragraph<p>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 <li>Ruby</li>
<li>Python</li>
<li>JavaScript</li>
<li>Go</li>
<li>PHP</li>
<p>Here is a paragraph</p>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C</li>
<li>Cobol</li>
<li>Fortran</li>
</ol>

To select the li elements whose position is an odd number, we can do this,

ol li:nth-of-type(odd) {
color: red;
}

which gives us:

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 EDIT ON
HTML CSS Result

ol { This is a first paragraph

color: gray;
} 1. Ruby
2. Python
ol li:nth-of-type(odd) { 3. JavaScript
color: red; 4. Go
} 5. PHP

Here is a paragraph

6. Java
7. Kotlin
8. C++
9. C
10. Cobol
11. Fortran

Resources 1× 0.5× 0.25× Rerun

To select the li elements whose position is an even number, we would do

ol li:nth-of-type(even) {
color: red;
}
● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 You may think that using nth-child would work just as effectively as long as you’re
specifying the li , for example:

ol li:nth-child(odd) {
color: red;
}

but that isn’t the case. Try it yourself!

Conclusion

These pseudo-classes come in handy when you have to select specific elements in a list of
siblings. To learn more about them, check the MDN Web Docs for  nth-child() and nth-of-
type() .

More CSS Fundamentals

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Learn more about CSS, and CSS selectors with these fundamental guides:

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 How to Draw Natural, CSS Tips for Better 7 CSS Units You Might Using CSS Pseudo- A Step by Step Guide to
Textured, Afro Color and Contrast Not Know About elements and Pseudo- the Auto-Placement
Hairstyles (Afros, Locs, Accessibility classes like ::before and Algorithm in CSS Grid
Braids, Twists) ::after

Copyright, Creative Testing Components in 8 Best CMS for 2020 How to Make PNG How to Work With
Commons and React Using Jest and Images Transparent for WordPress Comment
Licensing For Web Enzyme Free Metadata
Developers

10 browsers child different happens HTML note Think used without TUTORIALS

Work
● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 SHARE:    

 VIEW COMMENTS 0

● Posted on 12th November 2019  COMMENTS  SHARE

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD