not: selektor pierwszego dziecka


811

Mam divtag zawierający kilka ultagów.

Jestem w stanie ustawić właściwości CSS tylko dla pierwszego ultagu:

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

Jednak moje poniższe próby ustawienia właściwości CSS dla każdego ultagu, z wyjątkiem pierwszego, nie działają:

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

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

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

Jak napisać w CSS: „każdy element oprócz pierwszego”?

Odpowiedzi:


1414

Jedna z opublikowanych wersji działa właściwie dla wszystkich nowoczesnych przeglądarek (w których obsługiwaneselektory CSS poziom 3 ):

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

Jeśli potrzebujesz obsługi starszych przeglądarek lub przeszkadzają ci ograniczenia:not selektora (przyjmuje tylko zwykły selektor jako argument), możesz użyć innej techniki:

Zdefiniuj regułę, która ma większy zakres niż zamierzony, a następnie „unieważnij” ją warunkowo, ograniczając jej zakres do tego, co zamierzasz:

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

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

Ograniczając zakres, użyj wartości domyślnej dla każdego ustawianego atrybutu CSS.


czy wiesz dokładnie, w których wersjach to nie jest obsługiwane?
Simon_Weaver

9
@ Simon_Weaver: W praktyce wszystko oprócz IE <9 obsługuje to. Świetnym źródłem informacji na temat tego rodzaju informacji jest caniuse.com .
Jon

2
Hmm .. uważaj na ograniczenia pierwszego rozwiązania: caniuse.com/#feat=css-not-sel-list Drugi brzmiał dla mnie bardziej rozsądnie. Dzięki!
iorrah

@iorrah twój link caniuse służy do listy selektorów, i tak, wsparcie jest nadal bardzo ograniczone. OP nie korzysta z listy selektorów. Myślę więc, że https://caniuse.com/#feat=css-sel3 jest bardziej odpowiednie, z doskonałym wsparciem poza dniami IE8.
secretwep

Działa to nawet bez elementu div na początku w chrome.
Achraf JEDAY

157

To rozwiązanie CSS2 („dowolne ulpo drugim ul”) również działa i jest obsługiwane przez więcej przeglądarek.

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

W przeciwieństwie :noti :nth-siblingThe sąsiedztwie rodzeństwa selektor jest obsługiwany przez IE7 +.

Jeśli JavaScript zmienia te właściwości po załadowaniu strony, powinieneś zapoznać się z niektórymi znanymi błędami w implementacjach IE7 i IE8 tego. Zobacz ten link .

Dla każdej statycznej strony internetowej powinno to działać idealnie.


4
@Leven: Ten link quirksmode mówi, że powinien działać w IE7, ale tylko statycznie. Jeśli twój JS umieszcza przed nim inny element, może nie zostać poprawnie zaktualizowany. Czy to problem, który widziałeś?
Alex Quinn

warto zauważyć, że w sekwencji elementów takich jak: ul ul div ul(gdzie te elementy są rodzeństwem), wybierane będą tylko drugie ul, ponieważ ostatnie nie ma ulprzed sobą samego
Brian H.,

79

Ponieważ :notnie jest akceptowany przez IE6-8 , sugeruję ci to:

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

Więc wybierasz każdy ulelement macierzysty oprócz pierwszego .

Patrz Chris Coyer za „Przydatne: nth-child Przepisy” artykułu więcej nth-child przykładów .


kto faktycznie używa IE6-8 w 2019 roku?
oldboy

14
Biorąc pod uwagę odpowiedź pochodzi z 2013 roku?
aasukisuki


14

not(:first-child)wydaje się już nie działać. Przynajmniej z nowszymi wersjami Chrome i Firefox.

Zamiast tego spróbuj tego:

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

6
Oba działają, ale mają inne znaczenie. ul:not(:first-child)oznacza dosłownie „każdy ulelement, który nie jest pierwszym dzieckiem swojego rodzica”, więc nie będzie pasował nawet do pierwszego, uljeśli będzie poprzedzony innym elementem ( pnagłówkiem itp.). Przeciwnie, ul:not(:first-of-type)oznacza „każdy ulelement z wyjątkiem pierwszego ulw pojemniku”. Masz rację, że OP prawdopodobnie potrzebował tego drugiego zachowania, ale twoje wyjaśnienie jest raczej mylące.
Ilya Streltsyn

9

Możesz użyć dowolnego selektora za pomocą 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

Nie miałem szczęścia z niektórymi z powyższych,

To był jedyny, który faktycznie dla mnie działał

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

To działało dla mnie, gdy próbowałem, aby pierwszy przycisk wyświetlany na stronie nie miał wpływu na opcję marginesu po lewej stronie.

to była opcja, którą wypróbowałem najpierw, ale to nie zadziałało

ul:not(:first-child)


4

Możesz używać selektora z :notpodobnym poniżej, możesz użyć dowolnego selektora wewnątrz:not()

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

możesz używać również :notbez selektora rodzica.

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

Więcej przykładów

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

Jak użyłem ul:not(:first-child)jest idealnym rozwiązaniem.

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

Dlaczego jest to idealne, ponieważ za pomocą ul:not(:first-child)możemy zastosować CSS na elementach wewnętrznych. Jak li, img, span, atagi itp.

Ale kiedy używane są inne rozwiązania:

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

i

div li~li {
    color: red;
}

i

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

i

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

Ograniczają one tylko CSS na poziomie ul. Załóżmy, że nie możemy zastosować CSS lijako „div ul + ul li”.

W przypadku elementów poziomu wewnętrznego pierwsze rozwiązanie działa idealnie.

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

i tak dalej ...

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.