first-child,last-child,테이블 스타일 만들기
페이지 정보
작성자 홈피사랑 작성일14-07-11 16:23 조회2,429회 댓글0건관련링크
본문
first-child, last-child는 테이블 스타일, 네비나 배너등을 만들때 첫번째요소나 마지막 요소를 선택할일이 많은데 아주 유용하게 사용되는 선택자 입니다.
first-child : 첫번째 자식요소에 스타일을 지정합니다.
last-child : 마지막 자식요소에 스타일을 지정합니다.
테이블 스타일 만들기 예제를 참고하세요 ^^
td,th가 first-child 셀렉터를 써서 border-left:0px; 로 설정했습니다.
last-child를 쓸수도 있는데 하위버전에선 제대로 동작하지 않습니다.
되도록이면 first-child를 쓰는게 더 좋을거 같습니다.
<style>
.table01{width:500px; border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb;}
.table01 caption{display:none;}
.table01 th,.table01 td{padding:13px 0px; border-bottom:1px solid #bbbbbb; border-left:1px solid #a7b872;}
.table01 th{background-color:#c2d38d; color:#404040; border-top:1px solid #a7b872; font-size:14px; }
.table01 th:first-child{border-left:0px;}
.table01 td:first-child{border-left:0px;}
.table01 td{font-size:12px; padding-left:10px;}
</style>
댓글목록
등록된 댓글이 없습니다.