CSS first-of-type stopped working after adding new section class

Question

Following on from a previous answer, i am using first-of-type to target the first menuSection like this...

.menuSection:first-of-type {
  background: red;
}

<div id="container">
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>

  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
</div>

This is working correctly, but when I throw in some extra sections with different classes it stops working...

.menuSection:first-of-type {
  background: red;
}

<div id="container">

  <section class="new_menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="new_menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>

  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
</div>

Anyone know where I am going wrong?

Answer 1

The first-of-type selector unfortunately doesn't refer to the first appearance of a class, but of the tag type, in your case section. So in combination with the class selector this doesn't select anything in your example.

If you know how many sections there will be, you can use section:nth-of-type(x) without a class (see example below), but otherwise the only solution is to assign a seperate class to that one section and use that in the selector.

section:nth-of-type(2) {
  background: red;
}

<div id="container">

  <section class="new_menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="new_menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>

  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
</div>

Answer 2

Heavily related question but because it's not intuitive I'll post an answer. The important thing to realize is the :first-of-type pseudo selector is for type meaning it looks at the element (i.e. div, p, etc) and goes off of that. The other important thing to note is it looks at siblings

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

You are trying to use to do this for classes so behind the scenes what it's doing is saying "Okay so you want all items of .menuSection so let me look at the type -- okay that's a divso let me try to grab the first one of the divs and if it has a class of menuSection I'm going to apply this style.

To illustrate this more clearly -- in your example you have new_menuSection as a separate style and you were wondering why is the style not applying to the first .menuSection. Like I said, it looks at the type so if you change the type of your .new_menuSection to another element, it works as expected.

.menuSection:first-of-type {
  background: red;
}

<div id="container">
  <div class="new_menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>

  <section class="menuSection">
    <div>
      <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </section>
</div>