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

공부/Jquery,CSS  2016.03.09 01:54
안녕하세요.명월입니다.
이번 포스팅에서는 저번 포스트에 이어서 Selector의 의사클래스에 대해서 공부하겠습니다.
CSS의 의사클래스는 선택자 중에서 약 12개 정도가 있는데 그 중 nth-child, nth-of-type, nth-last-child, nth-last-of-type에 대해 공부하겠습니다


nth-child example


위와 같은 예제를 두고 오늘 제시된 의사클래스를 공부하여 봅시다.

먼저 nth-child의 사용법은 요소:nth-child(n)의 형태로서 요소의 n번째의 요소를 선택하는 것입니다.
예로 4번의 값을 선택하려고 한다면 tbody > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2)의 형태로 선택하면 되겠습니다.


nth-child example


그러나 nth-child로 8번을 선택하려고 한다면 조금 애매해 집니다.왜냐하면 마지막 p의 형태 다음이 span의 형태이기 때문입니다.
아주 단순하게 생각하면 tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(1)로 만들면 마지막의 span은 하나이기 때문에 1로 하면 되지 않을까 생각되는데. 이렇게 사용하면 설정이 되지 않습니다.
이는 nth-child의 선택자는 태그 요소의 관계없이 선택을 하기 때문입니다. 즉 span:nth-child(1)의 경우는 아무것도 선택이 되지 않는 형태가 되는데 이유는 1번째 태그는 span의 형태가 되지 않기 때문입니다.
즉 그렇다면 위의 것을 선택하려면 tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(2)의 형태가 되어야 선택이 됩니다.
이렇게 되면 무언가 헷갈립니다. 단순한 구조면 관계없지만 복잡한 웹구조면 분명 헷갈릴 것입니다.
그래서 있는 의사클래스는 nth-of-type입니다. 이는 같은 레벨의 같은 요소의 n 번째가 되기에 우리가 처음에 생각했던 그 형태로 만들어 질 수 있습니다.


nth-child example


그 다음에는 nth-last-child, nth-last-of-type의 선택자입니다. 이 선택자는 명명에서도 알 수 있듯이 last, 즉 역으로 선택되는 형태입니다.
예로 6과 5을 선택해 보겠습니다.


nth-last example


다음 포스트에서 계속 의사클래스 선택자를 공부하겠습니다.



댓글 2개가 달렸습니다.
댓글쓰기
  1. SONYLOVE
    2016.03.16 17:52 신고 |  수정/삭제  댓글쓰기

    저도 이거 대충 눈먼 봉사처럼 사용하고 있었는데 이젠 뭔가 알고 사용할 수 있을거 같네요.
    감사합니다.