Як я можу вибрати всіх дітей елемента, крім останньої дитини?

371

Як би я вибрав усіх, крім останнього, за допомогою селекторів CSS3?

Наприклад, отримати лише останню дитину було б div:nth-last-child(1).

css-selectors css

689

Ви можете використовувати заперечення псевдокласу:not() проти :last-childпсевдокласу . Представляючи CSS Selectors 3 рівня, він не працює в IE8 або нижче:

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

— Нік Крейвер
джерело

це використовується як є? Без нічого перед першою кишкою?

— johny чому

ви div

— Даллас,

2

Для тих, хто використовує SASS, ви можете використовувати &:not(:last-child) { /* styles * }всередині елемента, на який хочете вплинути.

— Мартін Джеймс

100

Зробити це просто:

Ви можете застосувати свій стиль до всіх 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)

— Себастьєн Хорін
джерело

6

Принаймні, для мене це поганий запах коду. Ви свідомо застосовуєте правило css до елемента, до якого ви цього не хочете, лише для того, щоб спробувати виправити інший шар, щоб скасувати його. Для мене це поганий запах коду. Я побоююся, що такий вид кодування css може призвести до більш важкого та складного у підтримці css. Іншими словами, ви створюєте код css для спагетті.

— Олександр Птах

1

це також може спрацювати, але проблема полягає в тому, що у вас є багато стилів css типу (рамка, колір, розмір шрифту тощо), вам потрібно буде знову ініціалізувати стиль css до: last-child. Тож відповідне рішення використовує: not (: last-child)

— davecar21

33

Рішення Ніка Крейвера працює, але ви також можете використовувати це:

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

Кріс Койєр з CSS Tricks зробив хороший : n-й тестер для цього.

— Робін В
джерело

Mozilla має чітке визначення : nth-last-child

— Клінт Пахл

1

Деякі люди кажуть, що :notпсевдо дуже дорого. Тому може бути хорошою ідеєю спробувати уникнути цього, де це можливо.

— Нейромедіатор

22

Коли прийде IE9, буде простіше. Однак багато часу, ви можете переключити проблему на одну, яка потребує: перший дитина та накреслити протилежну сторону елемента (IE7 +).

— Ніколас Вілсон
джерело

10

Використання рішення нік-кравера з selectivizr дозволяє вирішувати крос-браузер (IE6 +)

— дельфі
джерело

1

щоб знайти елементи з останнього, використовуйте

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

— Авінаш Малхотра
джерело

1

Рішення Ніка Крейвера дало мені те, що мені потрібно, але зробити це явним для тих, хто використовує CSS-в-JS:

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

— maddRobot
джерело

1

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

цей код повинен застосовувати стиль до всіх

крім останньої дитини

— RyanGonzalezUSA
джерело