Как выбрать класс, включенный в тег с именем «form-group»?

Question

Я создавал всплывающую форму в течение нескольких часов. Однако я пытался выбрать, я не могу выбрать тег, метка охватила тег класса с именем "form-group". На самом деле, в том же файле кода HTML есть еще один тег класса с именем label. Я не хочу на это влиять CSS.

index. html

<div class="modal-body">
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control">
            </div>
          </form>
          <form>
            <div class="form-group">
              <label for="level">*Which language and what Level- beginner, intermediate, advanced, or business level</label>
              <input type="text" name="level" class="form-control">
            </div>
          </form> 

Style. css

#contactModal {
  display: none;
  color: black;
}
.modal-body {
  color: black;
}
.form-group .label {
  color: #7c7c7c;
}

Answer 1

.form-group .label применяется к каждому тегу с классом label, который является дочерним по отношению к тегу с классом form-group, но у вашего ярлыка нет класса label. Поэтому вам нужно либо добавить этот класс, либо использовать селектор .form-group > label, который применяется к каждому тегу типа <label>, который является потомком тега с классом form-group.

Answer 2

Вы можете исключить элемент, к которому вы не хотите применять правила css, добавив в него класс. Проверьте код ниже.

HTML

<div class="modal-body">
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control">
            </div>
          </form>
          <form>
            <div class="form-group exclude">
              <label for="level">*Which language and what Level- beginner, intermediate, advanced, or business level</label>
              <input type="text" name="level" class="form-control">
            </div>
          </form> 

CSS

.form-group:not(.exclude) label {
  color: #7c7c7c;
}

Это правило css будет применяться только к тем элементам <label>, которые находятся внутри элемента .form-group без класса .exclude