ні: селектор першої дитини

У мене є divтег, що містить кілька ulтегів.

Я можу встановити властивості CSS лише для першого ulтегу:

div ul:first-child {
    background-color: #900;
}

Однак мої наступні спроби встановити властивості CSS для кожного ulтегу, за винятком першого, не спрацюють:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

Як я можу записати в CSS: "кожен елемент, крім першого"?

Одна з версій ви вивішені на насправді працює на всі сучасні браузери (де CSS селектори рівень 3 є підтримуваними ):

div ul:not(:first-child) {
    background-color: #900;
}

Якщо вам потрібно підтримувати застарілі браузери або якщо вам перешкоджає обмеження:not селектора (він приймає лише простий селектор як аргумент), ви можете використовувати іншу техніку:

Визначте правило, яке має більший обсяг, ніж ви маєте намір, а потім умовно "скасуйте" його, обмеживши його сферу застосування лише тим, що ви маєте намір:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Обмежуючи область застосування, використовуйте значення за замовчуванням для кожного атрибута CSS, який ви встановлюєте.

Це рішення CSS2 ("будь-яке ulінше ul") теж працює, і його підтримують більшість браузерів.

div ul + ul {
  background-color: #900;
}

На відміну від :notта :nth-sibling, сусідній селектор сестер підтримується IE7 +.

Якщо у вас змінити властивості JavaScript після завантаження сторінки, вам слід переглянути деякі відомі помилки в реалізаціях цього IE7 та IE8 . Дивіться це посилання .

Для будь-якої статичної веб-сторінки це має працювати ідеально.

Оскільки IE6-8:not не прийнято , я б запропонував вам це:

div ul:nth-child(n+2) {
    background-color: #900;
}

Таким чином, ви вибираєте кожен ulз його батьківських елементів, крім першого .

Щоб отримати додаткові приклади, перегляньте статтю Кріса Койєра "Корисні: Рецепти для дітей- нійців " .nth-child

div li~li {
    color: red;
}

Підтримує IE7

not(:first-child)здається, більше не працює. Принаймні, з більш новими версіями Chrome і Firefox.

Натомість спробуйте це:

ul:not(:first-of-type) {}

Ви можете використовувати будь-який селектор not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Я не мав удачі з деяким із перерахованого,

Це було єдине, що насправді працювало на мене

ul:not(:first-of-type) {}

Це працювало для мене, коли я намагався, щоб перша кнопка на сторінці не була виконана опцією ліворуч.

це був варіант, який я спробував спочатку, але це не вийшло

ul:not(:first-child)

Ви можете використовувати свій селектор, :notяк внизу, ви можете використовувати будь-який селектор всередині:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

Ви також можете використовувати :notбез вибору батьків.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Більше прикладів

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Як я використав ul:not(:first-child)- ідеальне рішення.

div ul:not(:first-child) {
    background-color: #900;
}

Чому це ідеально, адже за допомогою ul:not(:first-child)ми можемо застосувати CSS до внутрішніх елементів. Як li, img, span, aтеги тощо

Але коли використовуються інші рішення:

div ul + ul {
  background-color: #900;
}

і

div li~li {
    color: red;
}

і

ul:not(:first-of-type) {}

і

div ul:nth-child(n+2) {
    background-color: #900;
}

Вони обмежують лише CSS рівня ul. Припустимо, ми не можемо застосувати CSS liяк "div ul + ul li".

Для елементів внутрішнього рівня перше Рішення працює чудово.

div ul:not(:first-child) li{
        background-color: #900;
    }

і так далі ...