Целевой дочерний div контейнера приложения с CSS

Question

Итак, я создаю веб-сайт, используя Angular. Затем у меня есть код, который выглядит примерно так:

<div class="main">
   <div class="container">
      <app-name>
         <div class="app-child-div"></div>
      </app-name>
   </div>
</div>

И мне сказали, что имя app-name может действительно измениться при развертывании. Так что я не совсем уверен, что название останется прежним. Однако, используя S CSS, как я могу настроить таргетинг на app-child-div с помощью CSS?

Прямо сейчас я делаю что-то вроде этого:

.main {

    .container {

        app-step-0 {

            .app-child-div {
                background: green;
            }
        }
    }
}

Но это не так похоже, делают свое дело. Так что я могу сделать?

Answer 1

Добавьте атрибут (например, класс), который будет идентифицировать ваш элемент.

Например, добавьте для него класс:

<div class="main">
   <div class="container">
      <app-name class="app-name-wrapper">
         <div class="app-child-div"></div>
      </app-name>
   </div>
</div>

Затем используйте этот .app-name-wrapper в CSS