When I use an integer, :nth-of-type won't target element.

Question

Hi, I was experimenting with the :nth-of-type pseudo class, but I notice if I have several <div> in one file it only selects the element from the first set of <div> and won't select the elements from the second set. If this doesn't make sense to you here is an example. I created a site where I keep notes of the courses as I go, of things that are important or easy to forget and where I can apply the new things I just learned. So for each example the tutor gives I write a separate line of code so I can see the steps. here is the code i wrote.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<p class="nth-of-type-example">Lorem ipsum dolor sit amet. Vestibulum non diam justo. Integer accumsan lacus ut quam pulvinar ullamcorper. Proin imperdiet mauris ac lectus blandit adipiscing.</p>

<div class="box1">Box 1</div>
<div class="box1">Box 2</div>
<div class="box1">Box 3</div>
<div class="box1">Box 4</div>
<p class="nth-of-type-example-1">Lorem ipsum dolor sit amet. Vestibulum non diam justo. Integer accumsan lacus ut quam pulvinar ullamcorper. Proin imperdiet mauris ac lectus blandit adipiscing.</p>

and the CSS for it was

css
   .box,
   .box1 {
    background-color: #d6472a;
    color: #fff;
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px 20px 10px 0;
    padding: 5px;
    text-align: center;
   }

   .nth-of-type-example,
   .nth-of-type-example-1{
       clear: both;
       color: #d6472a; 
   }

   .box:nth-of-type(2) {
    background-color: steelblue;
}

In this example the second box in the <div> with the class of box turns blue but if I change the selector in CSS to box1 .

css
   }

   .box1:nth-of-type(2) {
    background-color: steelblue;
}

it does nothing. It does not select the 2nd box in the set of <div> with the class of box1. However, if I change the argument from an integer the word odd or even it selects the elements in both set of <div> . At the same time if I comment out the first set of <div> with the class of box it then selects the <div> with the class of box1 but won't select it if the <div> with the class of box is active, even if in the CSS I use the box1 selector.

Guil said that this selector is instructing the browser to target every second <div> inside a parent element. Even when I remove all the classes on both set of <div> and use the integer (2), it still only selects the 2nd <div> of the first set of divs. I thought the problem was my code. Maybe there was something I was missing so I did it with the example Guil gave. I copied the code (the 4 divs and the 1 paragraph) once. The same thing happens. Can anyone explain why that is?

This is Guil's example;

html
<!DOCTYPE html>
<html>
<head>
    <title>Structural Pseudo-classes</title>
    <link rel="stylesheet" href="css/styles_pseudo_classes_nth_of_type.css" />
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <p>In this lesson, we'll get more specific with structural pseudo-classes by using ones that target particular types of HTML elements.</p>

<div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <p>In this lesson, we'll get more specific with structural pseudo-classes by using ones that target particular types of HTML elements.</p>

</body>
</html>

css
body {
    color: #222;
    font: normal 1.2em/1.5 sans-serif;
    margin: 0 auto;
    width: 78%;
}

div {
    background-color: #919090;
    color: #fff;
    float: left;
    width: 165px;
    height: 165px;
    margin: 50px 40px 40px 0;
    padding: 20px;
}

p {
    clear: both;
}



/* Structural Pseudo-classes - :nth-of-type */

div:nth-of-type(2) {
    background-color: steelblue;
}

As you can see here I've copied the divs a second time but in the CSS I've used the argument (2). In this case it only selects the 2nd div element of the first set of divs and not the second set of divs. Am I making sense or is there something I'm missing completely, because again Guil said this is supposed to target the second div inside a parent element. Oh crap! Wait a minute, while typing all this code I think I just got it. I think I'm looking at it wrong. I'm thinking because I wrote the code as a group immediately after each other it's like two sets of divs, but it's actually one set of divs isn't it. and the div I'm thinking is the second 2nd div is actually the 6th div isn't it. That's why it isn't selecting, but the odd and even will obviously be selected. I'm not even sure I should go ahead and post this long question. But I need to be sure so I'll appreciate it if an expert replies. I apologize for this much code. Thanks guys. I'm so dumb!

Answer 1 · 2014-11-15T06:24:41Z

November 15, 2014 6:24am

Samuel,

You came around to the right conclusion at the end. :)

All of those divs are being treated as children of the same element, so only the 2nd div will show any changes. If you grouped them into different sections, like:

<body>

  <section id="firstSection">
     <div>Box 1</div>
     <div>Box 2</div>
     <div>Box 3</div>
     <div>Box 4</div>
     <p>In this lesson, we'll get more specific with structural pseudo-classes by using ones that target particular types of HTML elements.</p>
  </section>

  <section id="secondSection">
     <div>Box 1</div>
     <div>Box 2</div>
     <div>Box 3</div>
     <div>Box 4</div>
     <p>In this lesson, we'll get more specific with structural pseudo-classes by using ones that target particular types of HTML elements.</p>
  </section>

</body>

and then targeted divs inside of sections, like this:

section div:nth-of-type(2) {
  background-color: steelblue;
}

you would see the background of the second div of each section change. If you only wanted to target the 2nd div of the first section, then you could use an ID to make your css selector more specific, like this:

#firstSection div:nth-of-type(2) {
  background-color: steelblue;
}

Glad you were able to work this out on your own!

Answer 2 · 2014-11-15T06:58:17Z

November 15, 2014 6:58am

Thank you Shawn. After I posted the question I actually tried it and realize that it was me who was being dumb and did exactly what you did in your example. Thanks for taking the time to answer my dumb question Shawn, much appreciated.

Welcome to the Treehouse Community

Looking to learn something new?

SAMUEL LAWRENCE

SAMUEL LAWRENCE

When I use an integer, :nth-of-type won't target element.

2 Answers

Shawn Flanigan

Shawn Flanigan

SAMUEL LAWRENCE

SAMUEL LAWRENCE