Целевой первый класс, содержащий строку (CSS)

Question

Я создал блоки в WPBakery, и для блока была сгенерирована следующая разметка (да, это действительно грязно, я знаю):

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я пытаюсь применить padding: 0 к первому столбцу container-fluid (т. Е. wrapper > container-fluid > row > col-sm-12).

Для этого у меня есть следующее:

.container-fluid:first-of-type [class*=col-] {
  padding: 0;
}

Тем не менее, все вышеперечисленные классы col имеют padding: 0. Как может. Я нацеливаюсь только на первый col класс под container-fluid?

Answer 1

Вы можете буквально использовать > селектор прямо из вашего собственного вопроса:

/* You might want to be more specific after 'div',
but since it doesn't have any siblings it's sufficient */

.container-fluid > .row > div {
  padding: 0;
}

Answer 2

Сузить элементы для выбора по first-of-type и имени родительского класса, к которому он применяется:

.container-fluid:first-of-type .myCustomDiv .container:first-of-type [class*=col-] {
  padding: 0;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test1
                  </div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test2
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="container">
          <div class="row">
            <div class="col-12">
              test3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Насколько я понимаю, вы не можете использовать первый тип с именами классов, как это. См. Этот ответ для получения дополнительной информации:

Селектор CSS3: первый тип с именем класса?

Теперь конкретно в вашем случае у вас есть две проблемы - вы не ' Не хотите, чтобы изменение применялось либо к братьям и сестрам , либо к потомкам первого класса, верно? Обход, показанный в ссылке выше, заключается в том, что вам нужно применить стиль к первому элементу div с этим классом, но затем удалить этот стиль для последующих экземпляров.

Чтобы найти других потомков, используйте:

.container-fluid [class*=col-] [class*=col-]

Чтобы найти братьев и сестер, используйте:

.container-fluid [class*=col-] ~ [class*=col-]

В приведенном ниже фрагменте я изменил стиль на цвет шрифта, чтобы его было легче увидеть. Вы увидите, что он применяется только к первому div с именем класса 'col-', а не для его детей или братьев и сестер.

.container-fluid [class*=col-] {
  color: red
}

.container-fluid [class*=col-] [class*=col-] {
  color: black
}

.container-fluid [class*=col-] ~ [class*=col-] {
  color: black
}

<div class="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        test
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        test
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="myCustomDiv">
              <div class="container">
                <div class="row">
                  <div class="col-12">
                    test
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

Попробуйте это:

ОБНОВЛЕНИЕ: Я полагаю, вы ищете это: (это выберет первый div из контейнера-жидкости, который содержит атрибут классов с col-sm ... если вы хотите выберите классы, содержащие только «col-», удалите sm

.container-fluid div[class*="col-sm"]:first-of-type  {
    padding: 10px;
}