Не добавление свойства css к последнему дочернему элементу во вложенном div- CSS

Question

Я хочу добавить определенное свойство к указанному c <div>, вот моя структура:

<div class="container">
<div class="parent">
  <div class="child1">
  <div class="child2">
</div>
<div class="parent">
  <div class="child1">
  <div class="child2">
</div>
<div class="parent">
  <div class="child1">
</div>
</div>

Теперь я пытаюсь применить css свойство border к class="child1" за исключением последний div, который имеет только class = "child1". Я пытался:

.container {
   & > div.child1:not(:last-child) {
    border-right: none;
   }
}

Но это не работает. Есть идеи вокруг?

Answer 1

Ваш селектор неверен. Вам не нужен первый >, так как дочерние элементы div не являются ПРЯМЫМИ дочерними элементами контейнера

 .container {
  width: 80%;
}

.container .child1:not(:last-child) {
  border-right: 3px solid red;
}

.parent {
  margin-bottom: 1em;

<div class="container">

  <div class="parent">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
  </div>
  <div class="parent">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
  </div>
  <div class="parent">
    <div class="child1">Child 1</div>
  </div>

</div>

Answer 2

Ответ:

Вы пытаетесь указать CSS:

1. найти родителя с несколькими детьми
2. затем найдите специалиста c child в каждом из этих родителей

Начиная с 2020 года, это не поддерживается чистым CSS, и ответ по иронии судьбы с 2009 года. Читать это , это и это .

---

Другие обходные пути:

A) По jQuery (или аналогичное решение) по JS)

// Find all parents
$('.parent').each(function() {
    // Find all children of this parent
    var $children = $(this).find('div[class^="child"]');
    if($children.length > 1) {// if has 2 or more children
        $children.css('borderRight', 'none');
        // -- or --
        $children.addClass('my_child_no_border_class');
    } else {// Has 1 or 0 children
        $children.css('borderRight', '1px solid red');
        // -- or --
        $children.addClass('my_child_border_class');
    }
});

Если вы предпочитаете добавлять классы, обязательно создайте CSS classes .my_child_border_class и .my_child_no_border_class

B) По HTML & CSS

Добавить специальные классы для детей с рамкой и без рамки:

<!-- HTML -->
<div class="container">
    <div class="parent">
        <div class="child1 noborder">
        <div class="child2">
    </div>
    <div class="parent">
        <div class="child1 noborder">
        <div class="child2">
    </div>
    <div class="parent">
        <div class="child1 withborder">
    </div>
</div>

<!-- CSS -->
.noborder {
    border-right: none;
}
.withborder {
    border-right: 1px solid red;
}

C) По CSS

/* All child1 get this css */
.parent > child1 {
    border-right: none;
}

/* then we override last parent's child1 with different css */
.parent:last-child > child1 {
    border-right: 1px solid red;
}

---

Вывод:

Могут быть и другие обходные пути, но не чистое CSS решение.

Answer 3

.container .parent:not(:last-child) .child1{
  border-right: none;
}

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

Answer 4

вы можете добавить еще один класс к последнему div или идентификатору, чтобы вы могли указать его следующим образом:

<div class="container"> 
    <div class="parent"> 
        <div class="child1"></div>
        <div class="child2"></div> 
    </div> 
    <div class="parent"> 
        <div class="child1"></div> 
        <div class="child2"></div> 
    </div> 
    <div class="parent"> 
        <div class="child1 last-child" id="child"></div>
   </div>
 </div>

и css свойство как следует:

.last-child  {
 border-right: none;
 } 

Answer 5

Вы можете настроить таргетинг на последнего родителя и ребенка1 следующим образом.

.parent {
  padding: 1rem;
  background-color: deepskyblue;
}

.child1 {
  height: 3rem;
  background-color: aqua;
}

.parent:last-child > .child1 {
  background-color: lime;
}

<div class="container">
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="parent">
    <div class="child1"></div>
  </div>
</div>