не: выбор первого ребенка


811

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

Ответы:


1415

Одна из версий вы вывешенные на самом деле работает на все современные браузеры (где 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, который вы устанавливаете.


Вы точно знаете, на каких версиях это не поддерживается?
Simon_Weaver

9
@Simon_Weaver: На практике все, кроме IE <9, поддерживают это. Большой ресурс для получения такой информации - caniuse.com .
Джон

2
Хм ... следите за ограничениями первого решения: caniuse.com/#feat=css-not-sel-list Второе звучало для меня более разумно. Спасибо!
Иорра

@iorrah Ваша ссылка на caniuse предназначена для списка селекторов, и да, поддержка все еще очень ограничена. ОП не использует список селекторов. Поэтому я думаю, что https://caniuse.com/#feat=css-sel3 более уместен с отличной поддержкой после IE8.
Secretwep

Это работает даже без элемента div в начале в Chrome.
АХРАФ ДЖЕДАЙ

158

Это решение CSS2 («любое ulза другим ul») также работает и поддерживается многими браузерами.

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

В отличие от :notи :nth-sibling, соседний селектор поддерживает один из вариантов IE7 +.

Если у вас JavaScript изменяет эти свойства после загрузки страницы, вам следует взглянуть на некоторые известные ошибки в реализациях IE7 и IE8 . Смотрите эту ссылку .

Для любой статической веб-страницы это должно работать идеально.


4
@Leven: в этой ссылке указано, что она должна работать в IE7, но только статически. Если ваш JS помещает другой элемент перед ним, он может быть обновлен неправильно. Это проблема, которую вы видели?
Алекс Куинн

возможно, стоит отметить, что в последовательности элементов, таких как: ul ul div ul(где эти элементы являются родственными элементами), будет выбран только второй ul, так как последний не имеет ulпредыдущего себе
Брайан Х.

79

Поскольку IE6-8:not не принимается , я бы предложил вам следующее:

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

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

Обратитесь к статье Криса Койера «Полезное: рецепты nth-child» для получения дополнительных nth-child примеров .


кто на самом деле все еще использует IE6-8 в 2019 году?
старик,

15
Учитывая ответ был с 2013 года?
Аасукисуки


14

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

Вместо этого попробуйте это:

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

6
Они оба работают, но имеют разное значение. ul:not(:first-child)буквально означает «любой ulэлемент, который не является первым дочерним элементом своего родителя», поэтому он не будет совпадать даже с 1-м, ulесли ему предшествует другой элемент ( pзаголовок и т. д.). Напротив, ul:not(:first-of-type)означает «любой ulэлемент, кроме 1-го ulв контейнере». Вы правы в том, что ОП, вероятно, нуждалось в последнем поведении, но ваше объяснение довольно обманчиво.
Илья Стрельцын

9

Вы можете использовать любой селектор с 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)){}

4

Мне не повезло с некоторыми из вышеперечисленных,

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

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

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

это был вариант, который я попробовал первым, но это не сработало

ul:not(:first-child)


4

Вы можете использовать свой селектор, :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*/
}

0

Как я использовал 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;
    }

и так далее ...

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.