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 이 구현. 이 링크를 참조하십시오 .

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

이후 :not에 의해 허용되지 IE6-8 , 나는 당신에게이 제안 :

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

따라서 첫 번째ul 요소를 제외한 상위 요소에서 모두를 선택합니다 .

더 많은 예제 는 Chris Coyer의 "유용한 : nth-child Recipes" 기사를 참조하십시오 .nth-child

div li~li {
    color: red;
}

IE7 지원

not(:first-child)더 이상 작동하지 않는 것 같습니다. 최소한 최신 버전의 Chrome 및 Firefox에서는 가능합니다.

대신 이것을 시도하십시오 :

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

당신은 어떤 선택기를 사용할 수 있습니다 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)){}

나는 위의 일부와 운이 없었습니다.

이것은 실제로 나를 위해 일한 유일한 사람이었습니다.

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

이것은 페이지에 첫 번째 버튼이 왼쪽 여백 옵션의 영향을받지 않도록하려고 할 때 효과적이었습니다.

이것은 내가 처음 시도한 옵션이지만 작동하지 않았습니다.

ul:not(:first-child)

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

내가 사용한 것처럼 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;
}

이들은 ul 수준 CSS 만 제한합니다. CSS를 li`div ul + ul li '로 적용 할 수 없다고 가정하자 .

내부 레벨 요소의 경우 첫 번째 솔루션이 완벽하게 작동합니다.

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

등등 ...