CSS - возможно ли установить border-bottom того же размера, что и класс, с которым он не связан?

Question

Можно ли установить border-bottom равным размеру класса, с которым он не связан?

Например, я хочу border-bottom внизу каждого тега <section>,но ширина разделов - это полная ширина экрана, поскольку border-bottom наследует этот размер.

Каждый <section> содержит <div class="container">, и мне нужно, чтобы border-bottom соответствовал этому размеру, чтобы подчеркнуть только ширину содержимого в этом <section>

Моя ближайшая попытка была:

section{
   .container:first-child{
     border-bottom: 2px solid red;
   }
}

Но я не получил желаемого результата из-за закрытия этих контейнеров до конца содержимого и т. Д.

также может быть несколько контейнеров в <section>, поэтому я могу 'просто добавьте его в container

ПРИМЕЧАНИЕ: опции scss также приветствуются, если они есть.

Я также не могу добавить границу к классу container.Его необходимо строго добавить в тег <section>.(Я почти уверен, что это из-за циклов wordpress, повторяющих один и тот же container несколько раз, а CSS все еще читает его как один контейнер, потому что в исходном коде может быть только один) <- не уверен, что это полностью верно, ноЭто единственный способ, чтобы результат этого имел смысл. </p>

проверьте ссылку скрипта здесь

Answer 1

Пока я вышел, вы можете редактировать только CSS / SCSS.

Вы можете попробовать :nth-child().

Проверьте эту ссылку: https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

Вы хотите добавить строку под последним элементом container в разделе. Используйте селектор :last-child для достижения этой цели. Если внутри элементов container есть элементы container, используйте >, чтобы выбрать только прямые дочерние элементы section.

section {
  width: 100%;
}
.body-wrap {
  display:flex;
}
.container {
  width: 100px;
}
section > .container:last-child {
  border-bottom: 2px solid red;
}
.container2 {
  width: 100px;
}
section .container2:last-child {
  border-bottom: 2px solid red;
}

<div class="body-wrap">
<section>
  <div class="container">
    <p>Border on last direct child</p>
  </div>
  <div class="container">
    SOME
    <p>TEXT</p>
  </div>
  <div class="container">
    SOME
    <p>TEXT</p>
    <div class="container">
    SOME
    <p>TEXT</p>
  </div>
  </div>
</section>
<section>
  <div class="container2">
    Border on last child
  </div>
  <div class="container2">
    <p>Will be duplicated when last-child has .container2 inside it</p>
  </div>
  <div class="container2">
    SOME
    <p>TEXT</p>
    <div class="container2">
    SOME
    <p>TEXT</p>
  </div>
  </div>
</section>
</div>

Answer 3

Я думаю, что эта одна строка кода может решить вашу проблему

section{
   .container:first-child{
     border-bottom: 2px solid red;
     box-sizing:border-box
   }
}