.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
I came across a clever CSS technique, originally developed by André Luís in 2009 and later refined by Lea Verou 2 years later; applying a style when the number of siblings is a particular number. It’s definitely worth knowing.
www.growingwiththeweb.com
'HTML&CSS' 카테고리의 다른 글
| SEO 메타태그 & 파비콘 (0) | 2020.03.11 |
|---|---|
| SEO (0) | 2019.08.13 |