닫기
이전 다음

NOTICE

새로움을 향한 설.레.임

first-child,last-child,테이블 스타일 만들기

페이지 정보

작성자 홈피사랑 작성일14-07-11 16:23 조회2,431회 댓글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>

 

 


 

댓글목록

등록된 댓글이 없습니다.

홈피사랑 제공서비스

  • 홈피사랑 홈페이지제작 1.웹표준, 크로스브라우징 지원

    웹표준, 크로스브라우징 지원

    IE, 크롬, 사파리,파이어폭스 등 어떤 브라우저에서도 동일하게 홈페이지가 보여질 수 있도록 제작됩니다.

  • 홈피사랑 홈페이지제작 2.호스팅/도메인 1년 무상지원

    호스팅/도메인 1년 무상지원

    기본형 호스팅,도메인 1년 무상지원

  • 홈피사랑 홈페이지제작 3.원본파일제공

    원본파일제공

    추후 수정 및 유지관리가 용이하도록 제작완료 후 홈페이지 소스를 제공합니다.

  • 홈피사랑 홈페이지제작 4.검색등록 무료지원

    검색등록 무료지원

    네이버,다음 사이트 및 지역검색 등록 지원 및 노출 키워드제안(협의후)