11

Как использовать селектор :not(:first-child)?

14

У меня есть тег 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 указать: «каждый элемент, кроме первого»?

5 ответ(ов)

0

Похоже, что селектор not(:first-child) больше не работает должным образом, по крайней мере, в последних версиях Chrome и Firefox.

Вместо этого попробуйте использовать следующий селектор:

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

Это должно помочь вам достичь нужного эффекта.

0

Стиль CSS, который вы представили, использует селектор соседних элементов ~, который применяется для выбора всех <li> элементов, следующих за первым <li> внутри одного и того же родительского элемента. В данном случае, все такие элементы будут окрашены в красный цвет:

div li ~ li {
    color: red;
}

Касательно поддержки IE7: данный селектор не поддерживается в Internet Explorer 7. В IE7 вы можете использовать другие подходы, чтобы достичь подобного эффекта, такие как применение классов или псевдоклассов. Если нужно выделить все последующие <li>, после первого, лучше всего использовать JavaScript или jQuery для добавления класса к этим элементам.

Пример на jQuery:

$('div li').each(function(index){
    if(index > 0) {
        $(this).css('color', 'red');
    }
});

Таким образом, данное решение позволит обойти ограничения IE7.

0

Вы можете использовать любой селектор с :not, чтобы исключить определенные элементы из ваших стилей. Вот несколько примеров, которые иллюстрируют, как применять :not с различными селекторами:

p:not(:first-child) {}  /* Исключает первый элемент <p> среди всех его братьев */
p:not(:first-of-type) {} /* Исключает первый элемент <p> среди его типа внутри родителя */
p:not(:checked) {}       /* Исключает отмеченные элементы (применимо к <input type="checkbox"> и <input type="radio">) */
p:not(:last-child) {}    /* Исключает последний элемент <p> среди всех его братьев */
p:not(:last-of-type) {}  /* Исключает последний элемент <p> среди его типа внутри родителя */
p:not(:nth-last-of-type(2)) {} /* Исключает второй с конца элемент <p> среди его типа */
p:not(:nth-last-child(2)) {}  /* Исключает второй с конца элемент <p> среди всех братьев */
p:not(:nth-child(2)) {}        /* Исключает второй элемент <p> среди всех братьев */

Эти примеры помогут вам более гибко управлять стилизацией элементов, исключая конкретные элементы из заданных правил.

0

Вы можете использовать селектор с :not, как показано ниже; вы можете использовать любой селектор внутри :not():

any_CSS_selector:not(any_other_CSS_selector):not(any_other_CSS_selector) {
    /*ВАШ СТИЛЬ*/
}

Также :not можно использовать без родительских селекторов:

:not(:nth-child(2)) {
    /*ВАШ СТИЛЬ*/
}

Вот несколько примеров:

any_CSS_selector:not(:first-child) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:first-of-type) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:checked) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:last-child) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:last-of-type) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:first-of-type) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:nth-last-of-type(2)) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:nth-last-child(2)) {
    /*ВАШ СТИЛЬ*/
}
any_CSS_selector:not(:nth-child(2)) {
    /*ВАШ СТИЛЬ*/
}

Эти примеры показывают, как можно использовать :not для исключения элементов из стилей CSS.

0

Я не добился успеха с некоторыми из вышеупомянутых вариантов.

Это единственный, который действительно сработал для меня:

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

Это помогло мне, когда я пытался сделать так, чтобы первая кнопка на странице не подвергалась влиянию свойства margin-left.

Сначала я попробовал следующий вариант, но он не сработал:

ul:not(:first-child) {}

Надеюсь, это поможет кому-то, кто сталкивается с аналогичной проблемой!

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь