<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
<li>서브메뉴5</li>
</ul>
이런식으로 서브메뉴를 만들고 각 메뉴사이에 라인을 긋는다고 하자.
li {border-bottom:1px solid #ccc;}
이렇게 하면, 마지막 서브메뉴5 밑으로도 줄이 생기게 되는데, 메뉴 사이에만 라인을 넣어야 하기 때문에 마지막 서브메뉴5 에는 border-bottom:1px solid #ccc; 가 적용안되게 하고 싶다는 것이 문제의 핵심이다.자식요소의 마지막 요소에만 적용하는 가상클래스가 있는데 그것이 바로 last-child 이다.li:last-child {border:0;}이렇게 하면 마지막줄은 나타나지 않게 된다.그런데, 애석하게도 last-child 는 CSS3부터 적용이 된다.
그러면, CSS2 에서는 어떻게? -> first-child를 사용하면 된다.li {border-top:1px solid #ccc;}
그러면, CSS2 에서는 어떻게? -> first-child를 사용하면 된다.li {border-top:1px solid #ccc;}
li:first-child {border:0;}
즉, bottom에 border를 주는대신 top에 border를 주고 처음나오는 li에는 border:0으로 처리하는 방법으로 해결한다.
이것 또한, IE6에서는 적용이 안된다…-_-;그냥 IE6 포기하는 수 밖에…정리하면,
이것 또한, IE6에서는 적용이 안된다…-_-;그냥 IE6 포기하는 수 밖에…정리하면,
- first-child -> 첫 자식요소에만 적용하기, CSS2에서 가능. IE6제외한 모든 브라우저 적용가능
- last-child -> 마지막 자식요소에만 적용하기, CSS3에서 적용가능
