Как использовать селектор :not(:first-child)?
У меня есть тег 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 ответ(ов)
Похоже, что селектор not(:first-child)
больше не работает должным образом, по крайней мере, в последних версиях Chrome и Firefox.
Вместо этого попробуйте использовать следующий селектор:
ul:not(:first-of-type) {}
Это должно помочь вам достичь нужного эффекта.
Стиль 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.
Вы можете использовать любой селектор с :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> среди всех братьев */
Эти примеры помогут вам более гибко управлять стилизацией элементов, исключая конкретные элементы из заданных правил.
Вы можете использовать селектор с :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.
Я не добился успеха с некоторыми из вышеупомянутых вариантов.
Это единственный, который действительно сработал для меня:
ul:not(:first-of-type) {}
Это помогло мне, когда я пытался сделать так, чтобы первая кнопка на странице не подвергалась влиянию свойства margin-left
.
Сначала я попробовал следующий вариант, но он не сработал:
ul:not(:first-child) {}
Надеюсь, это поможет кому-то, кто сталкивается с аналогичной проблемой!
Существует ли селектор "предыдущий брат"?
Что означает селектор CSS "~" (тильда/кручёная)?
CSS-селектор для первого элемента с классом
Использование подстановочного знака * в CSS для классов
Что означает селектор CSS "+" (плюс)?