как НЕ применять пограничное право к последнему потомку div- CSS

Question

Вот мое html:

<div class="main">
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
<div class="parent">
  <div class="child">
    <span></span>
    <label></label>
  </div>
  <div class="child2">
   // some html content
 </div>
</div>
</div>

Теперь я хочу применить свойство border-right к классу child. Я сделал:

.parent.child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

Я также попытался:

.parent.child {
  border-right: 1px solid #e9e9e9;
}
.parent.child-child {
  border:none;
}

В результате того, что оба они не показывают границу ни с одним из элементов div. Есть идеи, как это работает?

Answer 1

На основании предоставленного вами кода любые границы, примененные к <div class="child">, не будут видны, поскольку в элементах HTML нет содержимого.

С учетом сказанного вам также потребуется обновить ваш CSS.

Это потому, что в настоящее время вы стилизуете все элементы с помощью class="parent child", но ни один из ваших элементов не имеет обоих селекторов в одном классе. Поскольку классы (parent> child) являются вложенными, вам потребуется пробел между ними в вашем файле CSS (см. Ниже).

.parent .child:not(:last-child) {
  border-right: 1px solid tpBorderColor;
  padding-right: 20px;
}

Например,

<style>
    .parent .child:not(:last-child) {
        border-right: 1px solid #000;
        padding-right: 20px;
    }
</style>

<div class="main">
    <div class="parent">
        <div class="child">
            <span></span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>// some html content</span>
            <label></label>
        </div>
        <div class="child2">
            // some html content
        </div>
    </div>
</div>

Примечание как первый экземпляр элемента стиля не отображается в приведенном выше примере, потому что нет содержимого.

<div class="parent">
    <div class="child">
        <span></span>
        <label></label>
    </div>
    <div class="child2">
        // some html content
    </div>
</div>

Answer 2

Не уверен, что это именно то, что вы ищете, но, поскольку ваш элемент .child находится рядом с элементом .child в dom, вы можете просто использовать что-то вроде этого:

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

Это влияет .child рядом с .child

.child + .child {
  border-left: 1px solid currentColor;
  padding-left: 20px;
}

<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>

Answer 3

Ваш код почти там. Просто сделал несколько небольших изменений.

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

.parent .child:not(:last-child) {
  border-right: 1px solid red;
  padding-right: 20px;
}

.child {
margin-bottom: 30px;
}

<div class="main">
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>sfs</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>sfa</span>
            <label>afa</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
    <div class="parent">
        <div class="child">
            <span>343</span>
            <label>asfdfaf</label>
        </div>
        <div class="child">
            // some html content
        </div>
    </div>
</div>