Как я могу выбрать все дочерние элементы, кроме последнего?

Question

Как бы я выбрал все, кроме последнего ребенка, используя селекторы CSS3?

Например, чтобы получить только последний ребенок будет div:nth-last-child(1),

Answer 1

Вы можете использовать отрицательный псевдокласс:not() против :last-child псевдокласс. Будучи представлен CSS селекторов уровня 3, он не работает в IE8 или ниже:

:not(:last-child) { /* styles */ }

Answer 2

Упрости:

Вы можете применить свой стиль ко всем элементам div и повторно инициализировать последний с помощью : last-child:

например в CSS:

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

или в SCSS:

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• легко читать / запомнить
• быстро выполнить
• совместимый с браузером (IE9+, так как он все еще CSS3)

Answer 3

Решение Ника Крейвера работает, но вы также можете использовать это:

:nth-last-child(n+2) { /* Your code here */ }

Крис Койер из CSS Tricks сделал хороший тестер для этого.

Answer 4

Когда выйдет IE9, будет проще. Однако в большинстве случаев вы можете переключиться на проблему, требующую:first-child и стилизовать противоположную сторону элемента (IE7+).

Answer 5

В css3 есть селектор: not. Используйте:not() с:last-child внутри, чтобы выбрать всех дочерних элементов, кроме последнего. Например, чтобы выбрать все li в ul, кроме последнего li, используйте следующий код.

ul li:not(:last-child){   }

Answer 6

Использование решения Ника Крейвера с http://selectivizr.com/ позволяет использовать кросс-браузерное решение (IE6+)

Answer 7

Если вы используете его внутри родительского элемента, тогда самый простой способ: &:not(:last-child){....} Пример:.row {// parent ... ... ... &:not(:last-child){....}}

Answer 8

Чтобы найти элементы из прошлого, используйте

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

Answer 9

.nav-menu li:not(:last-child){
    // write some style here
}

этот код должен применять стиль ко всем

кроме последнего ребенка

Answer 10

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

      & > *:not(:last-child) {/* styles here */}

Пример

      <div class="parent">
  <div>Child one</div>
  <div>Child two</div>
</div>

Это захватит все дочерние DIV в родительском

Answer 11

Решение Ника Крейвера дало мне то, что мне было нужно, но сделать это явным для тех, кто использует CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

Answer 12

вы можете использовать этот ярлык.

      element:not(:last-child) { 
 // Your Css Style here
}

например, если элемент, который вы хотите стилизовать, - это 'li':

      li:not(:last-child) { 
  border: '1px solid #233';
}

Answer 13

Как выбрать всех дочерних элементов элемента, кроме последнего, с помощью CSS?

Ответ: этот код будет работать

<style>
.parent *:not(:last-child) { 
  color:red;
}
</style>

<div class='parent'>
  <p>this is paragraph</p>
  <h1>this is heading</h1>
  <b>text is bold</b>
</div>