의사클래스 - first-child, last-child, first-of-type, last-of-type [Jquery, CSS]

공부/Jquery,CSS  2016.03.09 22:24

안녕하세요.명월입니다.
이번 포스트는 저번 포스트에 이어서 선택자의 의사클래스 중 first-child, last-child, first-of-type, last-of-type를 공부하겠습니다.

간단하게 오늘 공부 할 의사 클래스에 대해서 살펴보면 어제 단순히 공부했던 nth-child(1)의 형태 또는 nth-of-type(1)과 같은 클래스 입니다.
그럼 굳히 오늘 공부할 키워드를 몰라도 요소선택에는 문제가 없으나 소스의 가독성과 깔끔함(?)을 위해서 알아둘 필요가 있습니다.

예제를 통해 자세히 알아보도록 하겠습니다.



first-child example


위와 같은 예시를 가지고 오늘 제시된 의사클래스를 공부해 봅시다.

먼저 위의 테이블에 전체 테두리를 그리려고 한다면 <td>기준으로 전 <td>의 오른쪽 아래는 border를 넣고 첫번째 행의 위쪽과 첫번째 열의 왼쪽의 border를 넣게 되면 전 테이블에 border가 들어가겠습니다
참고로 전 <td>의 요소에 border를 넣으면 곂치는 부분이 생기기 때문에 보기에 안 좋습니다.

그렇다면 첫번째 행의 위쪽을 생각한다면 tr의 first-child에 위쪽 border를 넣고 첫번쨰 열 td의 first-ot-type에 왼쪽 border를 넣으면 깔끔하게 border가 들어가겠네요..


first-child example result


저번 포스트에서 한번 작성해 본 부분이라서 그런지 이해하는데 큰 어려움은 없습니다.나머지 last-child, last-of-type은 nth-last-child(1), nth-last-of-type(1)과 같습니다.


last-child example result


다음 포스트는 의사클래스의 나머지 only-child, only-of-child, empty, root에 대해 공부하겠습니다.


댓글 0개가 달렸습니다.
댓글쓰기