not : 첫 번째 자식 선택기

not : 첫 번째 자식 선택기

---

나는이 div몇 가지 포함 태그 ul태그.

첫 번째 ul태그에 대해서만 CSS 속성을 설정할 수 있습니다 .

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

그러나 ul첫 번째 태그를 제외하고 서로 CSS 속성을 설정하려는 다음 시도 는 작동하지 않습니다.

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로 어떻게 작성할 수 있습니까? "첫 번째를 제외한 각 요소"?

---

게시 한 버전 중 하나는 실제로 모든 최신 브라우저에서 작동 합니다 ( 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 속성 의 기본값을 사용하십시오 .

---

이 CSS2 솔루션 ( "어떤 ul다른 후 ul")도 작동하고, 더 많은 브라우저에서 지원됩니다.

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

달리 :not와 :nth-sibling상기 인접 형제 선택기 IE7 +에 의해지지된다.

당신이 가지고있는 경우 자바 스크립트는 페이지가로드 한 후 이러한 속성을 변경, 당신은 몇 가지 알려진 버그 봐야한다 IE7 과 IE8 이 구현. 이 링크를 참조하십시오 .

정적 웹 페이지의 경우 완벽하게 작동합니다.

---

Since :not is not accepted by IE6-8, I would suggest you this:

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

So you pick every ul in its parent element except the first one.

Refer to Chris Coyer's "Useful :nth-child Recipes" article for more nth-child examples.

---

div li~li {
    color: red;
}

Supports IE7

---

not(:first-child) does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.

Instead, try this:

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

---

You can use any selector with 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)){}

---

I didn't have luck with some of the above,

This was the only one that actually worked for me

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

This worked for me when I was trying to have the first button displayed on the page not be effected by a margin-left option.

this was the option I tried first but it didn't work

ul:not(:first-child)

---

You can use your selector with :not like bellow you can use any selector inside the :not()

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

you can use :not without parent selector as well.

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

More examples

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*/
}

---

As I used ul:not(:first-child) is a perfect solution.

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

Why is this a perfect because by using ul:not(:first-child), we can apply CSS on inner elements. Like li, img, span, a tags etc.

But when used others solutions:

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

and

div li~li {
    color: red;
}

and

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

and

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

These restrict only ul level CSS. Suppose we cannot apply CSS on li as `div ul + ul li'.

For inner level elements the first Solution works perfectly.

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

and so on ...

참고URL : https://stackoverflow.com/questions/12289853/notfirst-child-selector