답변:
설명:
원래 질문에 대한 이전 문구 때문에 일부 소수의 시민들은이 답변이 오도 될 수 있다는 우려를 제기했습니다. CSS3에서 스타일 은 자식 수에 따라 부모 노드에 적용 할 수 없습니다 . 그러나 스타일 은 형제 수에 따라 자식 노드에 적용 할 수 있습니다 .
원래 답변 :
놀랍게도 이제는 순전히 CSS3에서 가능합니다.
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}트릭은 첫 번째 자식도 마지막 자식 일 때 선택하는 것입니다. 형제 수에 따라 효과적으로 선택합니다.
이 기술에 대한 크레딧은 André Luís (발견) 및 Lea Verou (정제)에게 전달됩니다.
CSS3을 좋아하지 않습니까? 😄
코드 펜 예 :
출처 :
:first-child:nth-last-child(1)을 사용할 수도 있습니다 :only-child.
아뇨 다소 가까이 갈 수있는 몇 가지 선택기가 있지만 아마도 귀하의 예제에서는 작동하지 않으며 최상의 브라우저 호환성이 없습니다.
:only-child는 :only-child요소의 부모 중 한 자녀가있는 경우는 적용에만 있다는 의미에서 몇 가지 사실 계수 선택기 중 하나입니다. 이상적인 예를 사용하면 children(1)아마도 그럴 것입니다.
:nth-child:nth-child당신이 정말하고 무엇을 찾고 있는지에 따라 가고 싶은 곳 선택은 실제로 당신을 얻을 수 있습니다. 8 명의 자녀가있는 경우 모든 요소의 스타일을 지정하려면 운이 나빠집니다. 그러나 8 번째 이후 요소에 스타일을 적용하려면 다음을 시도하십시오.
p:nth-child( n + 8 ){
/* add styles to make it pretty */
}불행히도, 이들은 아마도 당신이 찾고있는 솔루션이 아닙니다. 결국, 수에 따라 스타일을 적용하려면 Javascript 마법사를 사용해야 할 것입니다.이 중 하나를 사용하더라도 순수한 브라우저를 사용하기 전에 브라우저 호환성을 면밀히 검토해야합니다. CSS 솔루션.
편집 귀하의 질문을 조금 다르게 읽습니다 . 자녀가 아닌 부모 를 스타일링하는 몇 가지 다른 방법 이 있습니다. 몇 가지 다른 선택기를 던져 보겠습니다.
:empty 과 :not자식이없는 요소의 스타일을 지정합니다. 그 자체로는 유용하지는 않지만 :not선택기 와 쌍을 이루면 자식이있는 요소 만 스타일을 지정할 수 있습니다.
div:not(:empty) {
/* We know it has stuff in it! */
}여기서 순수 CSS를 사용하는 어린이 수는 계산할 수 없지만 멋진 작업을 수행 할 수있는 또 다른 흥미로운 선택기입니다.
참고 :이 솔루션은 요청한 부모 요소가 아닌 특정 길이의 하위 세트를 반환합니다. 다행히도 여전히 유용합니다.
안드레 루이스는 방법을 함께했다 : http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/는 불행하게도, 그것은 단지 IE9과 이상 작동합니다.
기본적으로 : nth-child ()를 요소의 위치를 처리하는 다른 의사 클래스와 결합합니다. 이 방법을 사용하면 특정 길이의 요소 집합에서 요소 를 지정할 수 있습니다 .
예를 들어 :nth-child(1):nth-last-child(3), 세트의 첫 번째 요소는 세트의 끝에서 세 번째 요소 인 반면 일치합니다. 이것은 두 가지 일을합니다. 세트에는 세 개의 요소 만 있고 세 요소 중 첫 번째 요소가 있다는 것을 보장합니다. 세 요소 집합의 두 번째 요소를 지정하려면을 사용합니다 :nth-child(2):nth-last-child(2).
예 1-세트에 세 개의 요소가있는 경우 모든 목록 요소를 선택하십시오.
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}Lea Verou의 예 1 대안 :
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}예 2-세 개의 목록 요소가있는 set의 마지막 요소를 대상으로합니다.
li:nth-child(3):last-child {
/* I'm the last of three */
}예 2 대안 :
li:nth-child(3):nth-last-child(1) {
/* I'm the last of three */
}예 3-네 개의 목록 요소가있는 set의 두 번째 요소를 대상으로합니다.
li:nth-child(2):nth-last-child(3) {
/* I'm the second of four */
}li:nth-child(3):nth-last-child(1) { transform: rotate(120deg); } li:nth-child(2):nth-last-child(2) { transform: rotate(240deg); }등등 ...
Matt의 솔루션에서 다음과 같은 Compass / SCSS 구현을 사용했습니다.
@for $i from 1 through 20 {
li:first-child:nth-last-child( #{$i} ),
li:first-child:nth-last-child( #{$i} ) ~ li {
width: calc(100% / #{$i} - 10px);
}
}이를 통해 항목 수를 빠르게 확장 할 수 있습니다.
예, nth-child를 사용하여 이렇게 할 수 있습니다.
div:nth-child(n + 8) {
background: red;
}이렇게하면 8 번째 div 자식이 빨간색이됩니다. 도움이 되었기를 바랍니다...
또한 누군가가 "이봐, CSS를 사용하여 스타일을 적용 할 수 없다면 JS를 사용하십시오!"라고 말합니다. 즉시 의심하십시오. CSS는 오늘날 매우 유연합니다
예 :: http://jsfiddle.net/uWrLE/1/
이 예에서 처음 7 명의 어린이는 파란색이고, 8 명의 어린이는 빨간색입니다.
순수한 CSS에서 (scss를 사용하여) 할 예정이지만 동일한 부모 클래스 내에 다른 요소 / 클래스가있는 경우이 버전을 사용할 수 있습니다!
&:first-of-type:nth-last-of-type(1) {
max-width: 100%;
}
@for $i from 2 through 10 {
&:first-of-type:nth-last-of-type(#{$i}),
&:first-of-type:nth-last-of-type(#{$i}) ~ & {
max-width: (100% / #{$i});
}
}아니요, CSS에는 이와 같은 것이 없습니다. 그러나 JavaScript를 사용하여 자식 수를 계산하고 스타일을 적용 할 수 있습니다.