마지막 자식을 제외한 요소의 모든 자식을 어떻게 선택할 수 있습니까?

CSS3 선택기를 사용하여 마지막 자식을 제외한 모든 항목을 어떻게 선택합니까?

예를 들어, 마지막 자식 만 얻으려면 div:nth-last-child(1)입니다.

당신이 사용할 수있는 부정 의사 클래스를:not() 에 대해 :last-child의사 클래스 . CSS Selectors Level 3을 도입했기 때문에 IE8 이하에서는 작동하지 않습니다.

:not(:last-child) { /* styles */ }

간단하게:

모든 div에 스타일을 적용하고 : last-child를 사용하여 마지막 div를 다시 초기화 할 수 있습니다 .

예를 들어 CSS에서 :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

또는 SCSS에서 :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• 읽기 / 기억하기 쉬운
• 빠른 실행
• 브라우저 호환 (IES +는 여전히 CSS3이므로)

Nick Craver의 솔루션은 작동하지만 다음을 사용할 수도 있습니다.

:nth-last-child(n+2) { /* Your code here */ }

CSS Tricks의 Chris Coyier는이를 위해 멋진 n 번째 테스터 를 만들었습니다 .

IE9가 오면 더 쉬워 질 것입니다. 그러나 많은 시간을 들여 문제를 첫 번째 자식으로 전환하고 요소의 반대쪽 (IE7 +)을 스타일 지정할 수 있습니다.

selectivizr 과 함께 nick craver 솔루션을 사용하면 크로스 브라우저 솔루션 (IE6 +)이 가능합니다

마지막에서 요소를 찾으려면

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

Nick Craver의 솔루션은 필요한 것을 제공했지만 CSS-in-JS를 사용하는 사람들을 위해 명시 적으로 만들었습니다.

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

.nav-menu li:not(:last-child){
    // write some style here
}

이 코드는 모든 스타일을 적용해야합니다