[CSS]처음 나오는 자식요소, 마지막 자식요소에만 적용하기 (first-child, last-child)

<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;} 
li:first-child  {border:0;}  

즉, bottom에 border를 주는대신 top에 border를 주고 처음나오는 li에는 border:0으로 처리하는 방법으로 해결한다.
이것 또한,  IE6에서는 적용이 안된다...-_-;
그냥 IE6 포기하는 수 밖에...

정리.........
first-child  -> 첫 자식요소에만 적용하기, CSS2에서 가능. IE6제외한 모든 브라우저 적용가능  
last-child   -> 마지막 자식요소에만 적용하기, CSS3에서 적용가능