[SOLVED] CSS Select Grandchild Element without adding new HTML, IDs, or !important

CSS Select Grandchild Element without adding new HTML, IDs, or !important

I am learning about parent and child elements and I am trying to figure out how to select/style a grandchild element that is nested inside 3 div's without adding additional classes, ID's, or !important to resolve it. The parent div has a class of "grandchild" and there are two other div's that share the same class. I need to style only "Aaron" without selecting the other p tags associated with same class "grandchild".

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p> <!--------------------Style ONLY this one----->

      <div class="greatgrandchild"> 
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

I have reviewed other answers on Stack Overflow but couldn't find my situation. Below shows the routes to tried and solve it in CSS.

/*styles Aaron & George*/
.parent > .child > div:first-of-type > p:nth-child(1) {
  color: green;
}

/*Styles Aaron & George*/
div[class="grandchild"] > p {
  color:green;
}

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p> <!--------------------Style ONLY this one----->

      <div class="greatgrandchild"> 
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

I have tried a couple hours on this and just can't wrap my head around how to do it.

Solution

Just use CSS Pseudo-classes Worked for me

.child:first-of-type .grandchild > p {
    color: green;
}

W3 School CSS Pseudo-classes