Оформить один и тот же класс в другом элементе с помощью селектора +

Question

Есть сайт, на котором есть код, который я поместил в jsfiddle: https://jsfiddle.net/roa8k7js/

На сайте очень сложный стиль CSS, более 10000 строк.При переключении этого сайта на WordPress стилизация была сохранена, и все было помещено в тему.

Таким образом, каждый <section> теперь находится в оболочке.Из-за этого стиль не работает должным образом.

Заполнение <section> определяется рядом правил, включая, по крайней мере, одно основное правило, использующее селектор +.

Правило выглядит следующим образом:

#layout1 .option-b:not(.custom-bg-image) + .option-b:not(.custom-bg-img)
{
  padding-top: 0;
}

Поскольку обертка была добавлена, селектор + не сможет правильно определить шаблон:

<div class="wrapper1">
  <section class="option-b">This is some text</section>
</div>
<div class="wrapper1">
  <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
</div>

section {
  border: 1px solid black;
}

#layout1 .container1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}

#layout1 .option-b:not(.custom-bg-image)+.option-b:not(.custom-bg-img) {
  padding-top: 0;
}

#layout1 .container1>.wrapper1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}

<div id="layout1">
  <div class="container1">
    <section class="option-b">This is some text</section>
    <section class="option-b">This is some more text - notice how there isn't a padding top on this one</section>
  </div>
</div>

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

Я пытаюсь определить, есть ли простой способ настроить CSS так, чтобы он мог правильно определить <section> в следующей оболочке для установкизначение для top-padding

Также обратите внимание, что невозможно удалить обертки, и все разделы уже оформлены правильно, без них.

Answer 1

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

Смежный соседний комбинатор (+) разделяет два селектора и соответствует второму элементу , только если он непосредственно следует за первым элементом ,и оба они являются потомками одного и того же родительского элемента.

Вот несколько обходных путей (при условии, что на оболочку, как показано в вашем примере, всего 2 <section>):

• Дайте ему еще один класс, который переопределяет отступы (безусловно, самый простой)
• Нацелен только на элемент nth
• Javascript

1) Просто добавьте "нет"padding "класс к любому элементу, к которому вы не хотите добавлять padding:

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1 > section.pt-0 {
  padding-top: 0;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
  </div>
</div>

2) Целевой элемент nth

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1:not(:first-child) > section {
  padding-top: 0;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

3) Конечно, JavaScript:

const elems = document.querySelectorAll('#layout1 .wrapper1 > .option-b:not(.custom-bg-image)');

if (elems.length > 1) elems[1].style.paddingTop = 0;

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>