Блог

Главная - Вопросы по программированию - выберите подкласс подкласса css

выберите подкласс подкласса css

#html #css

Вопрос:

Я хотел бы установить специальный css для «Это пункт 1», а все остальные заголовки-еще один. Как это сделать ?

 <div class="example2">
  <div class="special">
    <div class="goal">
        This is paragraph 1
    </div>
  </div>
  <div class="special">
    <div class="goal">
        This is paragraph 2
    </div>
  </div>
  <div class="special">
    <div class="goal">
        This is paragraph 3
    </div>
  </div>
</div>

Я пытался это сделать, но ничего не вышло. Как достичь первого класса «.goal» в css ?

 div.example2 p.special p.goal { color: green; }
div.example2 p.special p.goal ~ p.goal { color: #333; }

Комментарии:

1. Обязательно используйте элементы абзаца для абзацев. 🙂

Ответ №1:

Сначала напишите стиль для всех div, а затем переопределите его с помощью :first-child селектора.

 .example2 > .special { color: #333; }

.example2 > .special:first-child { color: green; } 
 <div class="example2">
  <div class="special">
    <div class="goal">
        This is paragraph 1
    </div>
  </div>
  <div class="special">
    <div class="goal">
        This is paragraph 2
    </div>
  </div>
  <div class="special">
    <div class="goal">
        This is paragraph 3
    </div>
  </div>
</div>

Ответ №2:

Если вы хотите оформить только первый элемент, оформите их все и переопределите первый:

 .goal {
  color: orange;
}

.special:first-child .goal {
  color: green;
} 
 <div class="example2">
  <div class="special">
    <div class="goal">
      This is paragraph 1
    </div>
  </div>
  <div class="special">
    <div class="goal">
      This is paragraph 2
    </div>
  </div>
  <div class="special">
    <div class="goal">
      This is paragraph 3
    </div>
  </div>
</div>

Или вы могли бы пойти другим путем…

 .goal {
  color: green;
}

.special:not(:first-child) .goal {
  color: orange;
} 
 <div class="example2">
  <div class="special">
    <div class="goal">
      This is paragraph 1
    </div>
  </div>
  <div class="special">
    <div class="goal">
      This is paragraph 2
    </div>
  </div>
  <div class="special">
    <div class="goal">
      This is paragraph 3
    </div>
  </div>
</div>
Метки: