0

I am just starting to learn pseudo-classes in CSS and I'm confused as to why nth-of-type and nth-child are behaving strangely in my code.

In this code, I assumed that the selector:

  :nth-of-type(3) {
    border: 2px solid red;
  }

will only select 2 elements: div with id "12" paragraph with id "113"

However, every third element of a type under every parent is receiving a red border. Why is this the case? Shouldn't this only be the case if I instead have the selector

body :nth-of-type(3)

Apologies for the winded question, and thank you for taking the time to clarify this.

Here's the full code:

  .parent{
     width: 400px;
     text-align:center;
     border: 1px solid black;
     float: left;
     margin: 20px;
  }
  .child{
     width: 300px;
     margin: 10px auto;
     border: 1px solid black;
  }
  .grandchild{
     width: 200px;
     margin: inherit;
     border: 1px solid black;
  }
  :nth-of-type(3) {
    border: 2px solid red;
  }
  :nth-child(3) {
    background-color: yellow;
  }
<body>
  <div class="parent" id="1">   
      <div class="child" id="11">
          <p class="grandchild" id="111">
            1, 1, 1
          </p>
          <p class="grandchild" id="112">
            1, 1, 2
          </p>
          <p class="grandchild" id="113">
            1, 1, 3
          </p>
          <p class="grandchild" id="114">
            1, 1, 4
          </p>
    </div>
    <div class="child" id="12">
          <p class="grandchild" id="121">
            1, 2, 1
          </p>
          <p class="grandchild" id="122">
            1, 2, 2
          </p>
          <p class="grandchild" id="123">
            1, 2, 3
          </p>
          <p class="grandchild" id="124">
            1, 2, 4
          </p>
     </div>
     <div class="child" id="13">
          <p class="grandchild" id="131">
            1, 3, 1
          </p>
          <p class="grandchild" id="132">
            1, 3, 2
          </p>
          <p class="grandchild" id="133">
            1, 3, 3
          </p>
          <p class="grandchild" id="134">
            1, 3, 4
          </p>
     </div>
     <div class="child" id="14">
          <p class="grandchild" id="141">
            1, 4, 1
          </p>
          <p class="grandchild" id="142">
            1, 4, 2
          </p>
          <p class="grandchild" id="143">
            1, 4, 3
          </p>
          <p class="grandchild" id="144">
            1, 4, 4
          </p>
      </div>
  </div>
  <div class="parent" id="2">   
      <div class="child" id="21">
          <p class="grandchild" id="211">
            2, 1, 1
          </p>
          <p class="grandchild" id="212">
            2, 1, 2
          </p>
          <p class="grandchild" id="213">
            2, 1, 3
          </p>
          <p class="grandchild" id="214">
            2, 1, 4
          </p>
    </div>
    <div class="child" id="22">
          <p class="grandchild" id="221">
            2, 2, 1
          </p>
          <p class="grandchild" id="222">
            2, 2, 2
          </p>
          <p class="grandchild" id="223">
            2, 2, 3
          </p>
          <p class="grandchild" id="224">
            2, 2, 4
          </p>
     </div>
     <div class="child" id="23">
          <p class="grandchild" id="231">
            2, 3, 1
          </p>
          <p class="grandchild" id="232">
            2, 3, 2
          </p>
          <p class="grandchild" id="233">
            2, 3, 3
          </p>
          <p class="grandchild" id="234">
            2, 3, 4
          </p>
     </div>
     <div class="child" id="24">
          <p class="grandchild" id="241">
            2, 4, 1
          </p>
          <p class="grandchild" id="242">
            2, 4, 2
          </p>
          <p class="grandchild" id="243">
            2, 4, 3
          </p>
          <p class="grandchild" id="244">
            2, 4, 4
          </p>
      </div>
  </div>
  <div class="parent" id="3">   
      <div class="child" id="31">
          <p class="grandchild" id="311">
            3, 1, 1
          </p>
          <p class="grandchild" id="312">
            3, 1, 2
          </p>
          <p class="grandchild" id="313">
            3, 1, 3
          </p>
          <p class="grandchild" id="314">
            3, 1, 4
          </p>
    </div>
    <div class="child" id="32">
          <p class="grandchild" id="321">
            3, 2, 1
          </p>
          <p class="grandchild" id="322">
            3, 2, 2
          </p>
          <p class="grandchild" id="323">
            3, 2, 3
          </p>
          <p class="grandchild" id="324">
            3, 2, 4
          </p>
     </div>
     <div class="child" id="33">
          <p class="grandchild" id="331">
            3, 3, 1
          </p>
          <p class="grandchild" id="332">
            3, 3, 2
          </p>
          <p class="grandchild" id="333">
            3, 3, 3
          </p>
          <p class="grandchild" id="334">
            3, 3, 4
          </p>
     </div>
     <div class="child" id="34">
          <p class="grandchild" id="341">
            3, 4, 1
          </p>
          <p class="grandchild" id="342">
            3, 4, 2
          </p>
          <p class="grandchild" id="343">
            3, 4, 3
          </p>
          <p class="grandchild" id="344">
            3, 4, 4
          </p>
      </div>
  </div>
  <div class="parent" id="4">   
      <div class="child" id="41">
          <p class="grandchild" id="411">
            4, 1, 1
          </p>
          <p class="grandchild" id="412">
            4, 1, 2
          </p>
          <p class="grandchild" id="413">
            4, 1, 3
          </p>
          <p class="grandchild" id="414">
            4, 1, 4
          </p>
    </div>
    <div class="child" id="42">
          <p class="grandchild" id="421">
            4, 2, 1
          </p>
          <p class="grandchild" id="422">
            4, 2, 2
          </p>
          <p class="grandchild" id="423">
            4, 2, 3
          </p>
          <p class="grandchild" id="424">
            4, 2, 4
          </p>
     </div>
     <div class="child" id="43">
          <p class="grandchild" id="431">
            4, 3, 1
          </p>
          <p class="grandchild" id="432">
            4, 3, 2
          </p>
          <p class="grandchild" id="433">
            4, 3, 3
          </p>
          <p class="grandchild" id="434">
            4, 3, 4
          </p>
     </div>
     <div class="child" id="44">
          <p class="grandchild" id="441">
            4, 4, 1
          </p>
          <p class="grandchild" id="442">
            4, 4, 2
          </p>
          <p class="grandchild" id="443">
            4, 4, 3
          </p>
          <p class="grandchild" id="444">
            4, 4, 4
          </p>
      </div>
  </div>
</body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Anon User
  • 33
  • 6
  • *However, every third element of a type under every parent is receiving a red border. Why is this the case?* --> this is how the selector works. and adding `body` at the start will do nothing since all the elements are by default descedant of body – Temani Afif Jul 23 '19 at 23:20
  • Thank you for the clarification! – Anon User Jul 23 '19 at 23:37

1 Answers1

0

I was able to answer my second question somewhat.

Second question:

For the selector: :nth-child(3) Why is this coloring the div with id="2" yellow? And why does it color the background for the whole page yellow when I do :nth-child(2) or :nth-child(1)

I found that using the selectors

body :nth-of-type(1) {
    border: 2px solid red;
  }
body :nth-child(1) {
    background-color: yellow;
}

fixes the problem. I am not sure why. It should be noted that I was using codepen but it seems to work fine with just :nth-of-type(1) on the code snippets on stack exchange.

Anon User
  • 33
  • 6
  • 1
    you have removed your second question so this answer will look a bit strange – Temani Afif Jul 23 '19 at 23:24
  • Makes sense. I was keeping my question and solution up to help other people dealing with odd behavior on codepen but I wanted to remove it from my original question as I found a solution to it. – Anon User Jul 23 '19 at 23:32
  • *I was using codepen but it seems to work fine with just :nth-of-type(1) on the code snippets on stack exchange.* be aware that tools like codepen/jsfiddle/etc add extra element that will make the behavior of some selector not good (related : https://stackoverflow.com/a/48632960/8620333) – Temani Afif Jul 23 '19 at 23:32