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

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

Ответ 1

Одна из версий, которые вы опубликовали действительно работает для всех современных браузеров (где CSS-селекторов уровня 3 поддерживается):

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

Если вам необходимо поддерживать устаревшие браузеры или вам мешает ограничение :not (оно принимает только simple selector в качестве аргумента), вы можете использовать другую технику:

Определите правило, которое имеет большую область действия, чем то, что вы намереваетесь, и затем "отменяете" его условно, ограничивая область действия тем, что вы намереваетесь:

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

div li~li {
    color: red;
}

Поддержка IE7

Ответ 5

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

Вместо этого попробуйте следующее:

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

Ответ 6

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

Ответ 7

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

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

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

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

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

ul:not(:first-child)

Ответ 8

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

Ответ 9

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

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