CSS стилизация дочернего элемента от родительского элемента с использованием селекторов

Question

Предположим, у меня есть 3 уровня элементов HTML-тега в родительских и дочерних отношениях. А это дедушка и бабушка. Внутри этого тега (parent) и внутри этого тега есть тег

(child). Теперь с помощью CSS я хочу изменить дизайн этого тега

(child) из тега (grandparent), используя CSS-селекторы от этого (прародительского) идентификатора или имени класса.

Нужна помощь в этом трюке css

<div>
   Hi I am grandparent.
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
</div>

Я хочу, чтобы результат был следующим: Сделайте цвет фона тега

любым цветом только для 4-го родителя. Обратите внимание, что контроль должен быть от прародителя. Это потому, что у меня есть * ngfor в бабушке и дедушке, и я хочу написать css для этого, используя концепцию nth-child (n).

Answer 1

Хотя ваши h2 теги не должны содержать p тегов, это должно сработать:

div h2:nth-of-type(4) {
  background-color: tomato;
}

    div h2:nth-of-type(4) {
      background-color: tomato;
    }

<div>
   Hi I am grandparent.
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
</div>

Answer 2

Вы можете использовать: nth-child () свойство CSS! Попробуйте приведенный ниже код. Я также прилагаю ссылку для работы CodePen. Чтобы понять, как это работает, вы можете поиграть с ним!

Посетите перо для более глубокого понимания и демонстрации: https://codepen.io/CUManiar/pen/vqGdze

.grand-parent {
  color: blue;
}

.grand-parent h2:nth-child(4) {
  color: red;
}

.grand-parent .parent p:nth-child(2) {
  color: pink
}

<div class="grand-parent">
   Hi I am grandparent.
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am grand child. </p>
          <p class="child"> Hi I am 2nd grand child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 2nd child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 3rd child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 4th child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 5th child. </p>
     </h2>
</div>