[CSS] 형제요소로 갯수 알아내기

2021.03.18

요소를 퍼센트로하여 적응형이나 반응형에서도 자유롭게 쓸 수 있는 템플릿이다.

이해를 확실히 하고자 다시 정리하게 되었다.

 

본 기법은 다양하게 응용할 수 있다. 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다양하게 매기는 것을 예시로 들었다.

flexbox를 사용할 수 없는 환경이라 가정한다.

 

다음 코드에서는 float: left 를 사용하여 li 요소들을 띄운 상태이다.

li {
    float: left;
}

/* li가 하나일 때 */
li:first-child:nth-last-child(1) {
    width: 100%;
}

/* li가 두개일 때 */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* li가 3개일 때 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* li가 4개일 때 */d d
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

• li:first-child:nth-last-child()
  • li중에 첫 번째 자식을 선택, nth-last-child() 를 그 뒤에 바로 붙여
    리스트 안의 자식 요소 갯수에 따른 스타일 분기문 역할을 한다.
  • 이 조건은 적어도 n개의 자식요소가 존재할 때 참이 된다.
• li:first-child:nth-last-child() ~ li
  • 나머지 형제 요소들을 선택, 같은 CSS 를 적용한다.

 

이를 간략화하여 자식 요소의 갯수를 n개라 했을 때 코드는 다음과 같다.

li:first-child:nth-last-child(n),
li:first-child:nth-last-child(n) ~ li {
    width: 1 / n * 100%;
}

 

 

❓만약에 3개의 셀렉터에 margin 이 있다면 어떻게 해야 될까?

/*
 * 조건1. width, margin 값이 지정됨.
 * 조건2. 1개, 2개 일 때도 width 값 변경.
 * width: 348px; margin: 28px; inner(레이아웃 기준값): 1100px;
*/

li:first-child:nth-last-child(1),
li:first-child:nth-last-child(1) ~ li {
	width: 100%;
    margin: 0;
}

li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 48.6%;
    margin: 2.6%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    /* 348/1100*100 = 31.636363.. */
    width: 31.6%;

    /* 28/1100*100 = 2.545454.. */
    margin: 2.6%;
}

대체로 1~3까지 써줘야 후에 수정할 때 좋다.

 

 

Reference

https://serisepomme.tistory.com/entry/CSS%EB%A1%9C-%EC%9E%90%EC%8B%9D-%EC%9A%94%EC%86%8C-%EA%B0%AF%EC%88%98-%EC%95%8C%EC%95%84%EB%82%B4%EA%B8%B0