li 개수에 따라서 width값 설정하기

.sub_nav ul li:first-child:nth-last-child(1) {
  width: 50%;
}

.sub_nav ul li:first-child:nth-last-child(2),
.sub_nav ul li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}

.sub_nav ul li:first-child:nth-last-child(3),
.sub_nav ul li:first-child:nth-last-child(3) ~ li {
  width: 33.3333%;
}

.sub_nav ul li:first-child:nth-last-child(4),
.sub_nav ul li:first-child:nth-last-child(4) ~ li {
  width: 25%;
}

.sub_nav ul li:first-child:nth-last-child(5),
.sub_nav ul li:first-child:nth-last-child(5) ~ li {
  width: 20%;
}


.sub_nav ul li:first-child:nth-last-child(6),
.sub_nav ul li:first-child:nth-last-child(6) ~ li {
  width:16.6%;
}

 

 

서브페이지 2뎁스에 유용하게 쓰고 있다 

이전엔  스크립트나 제이쿼리 li 요소 개수를 세어서 너비를 변경했는데 

css로도 너비 변경이 가능!!

 

.sub_nav ul li:first-child:nth-last-child(5), /* 개수가 5개일 때 첫번째(뒤에서 부터 5번째) 너비는 20% */
.sub_nav ul li:first-child:nth-last-child(5) ~ li { /* 첫번째 요소 일반형제연산자(~) 뒤에도 모두 20%로  */
  width:20%; 
} 

 

 

 

 

 

구글링 중에 발견

 

https://www.growingwiththeweb.com/2014/06/detecting-number-of-siblings-with-css.html

Detecting number of siblings with CSS