first-child, last-child 가로로 li를 여러개 생성시 border 첫번째와 마지막에만 적용 > 웹개발팁


웹개발팁

모아보자 [CSS] first-child, last-child 가로로 li를 여러개 생성시 border 첫번째와 마지막에만 적용 웹개발팁

[CSS] first-child, last-child 가로로 li를 여러개 생성시 border 첫번째와 마지막에만 적용

본문

li를 여러개 생성시 border:1px solid #ccc; 넣으면

겹치는 부분은 2줄이되어 두껍게 나오는데요.


이럴때 first-child, last-child 사용하면됩니다.

 
// 마지막을 제외한 오른쪽 경계선 없애기 
.menu ul li {width:216px;height:70px;float:left;border:1px solid #ccc;border-right:0} 
.menu ul li:last-child {border-right:1px solid #ccc} 
 
// 첫번째를 제외한 왼쪽 경계선 없애기 
.menu ul li {width:216px;height:70px;float:left;border:1px solid #ccc;border-right:0} 
.menu ul li:first-child {border-right:1px solid #ccc} 


모바일버전 RSS SITEMAP