HTML+CSS 기초 강의 - 28. CSS 선택자 기초 5 - 가상클래스
강의 내용이 초보자에게는 조금 어렵습니다.
어려운 개념이고, 중급 과정 정도에서 배우게되면 좋을 내용이지만, 워낙 빈번하게 사용하기 때문에 이런 선택자를 사용한다는 것만이라도 알아야 해서 기초 과정에 살짝 끼워넣었습니다.
초보자는 이해 안되는 부분들은 읽고서 일단 넘어가기를 권합니다.
클래스/태그:first-child, 클래스/태그:last-child
클래스/태그로 선택한 목록의 첫번째 요소, 또는 마지막 요소를 선택합니다.
예를들어
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul><ul> <li>6</li></ul><ul> <li>7</li> <li>8</li></ul>
섹션에서
li:first-child 는 <li>1</li>, <li>6</li>, <li>7</li> 를
li:last-child 는 <li>5</li>, <li>6</li>, <li>8</li> 를 선택합니다.
클래스/태그:nth-child(n)
n번째 오는 자식 요소가 클래스/태그이면 선택합니다.
n번째(n-th)라는 용어에 주의해야 합니다.
서수이기 때문에 목록의 요소중 처음 오는 요소는 첫번째 요소가 됩니다.
nth-child(n) 에서 최종 숫자인 n은 1부터 시작(첫번째)한다는 뜻입니다.
n은 숫자를 입력할 수 있지만, "n" 과 조합해 증분되는 요소들을 여러개 선택할 수도 있습니다.
즉, 1,2,3... 처럼 숫자를 입력하면 해당 순서에 오는 요소를 선택하지만, "2n", "3n" 처럼 변수명 "n"을 대입해 사용할 수도 있습니다.
이때 변수인 "n" 은 0에서 시작합니다. n은 0,1,2,3,4,5의 숫자가 대입되는 정수입니다.
변수로 사용할때의 n은 0에서 시작합니다.
2n 은 부모의 2,4,6,8... 번째 요소중 클래스/태그인 것을 선택합니다.
3n+1은 부모의 1,4,7,10... 번째 요소중 클래스/태그인 것을 선택합니다.
중요합니다.
nth-child 는 선택자 이름 그대로 몇번째 오는지가 먼저이고 최우선 순위를 가집니다.
해당 순서에 오는 요소가 해당되는 클래스/태그가 아니면 CSS 속성은 적용되지 않습니다.
예를들어(태그는 생략)
li:nth-child(2)
로 선택하면 2, 8이 선택됩니다.
li:nth-child(2n)
은 2,4,8 이 선택됩니다.
li:nth-child(2n+1)은
1,3,5,6,7 이 선택됩니다.
li:nth-child(3n+1)
은 1,4,6,7이 선택됩니다.
특수 한정자로 "odd","even" 을 지원합니다.
odd 는 2n+1, even은 2n 과 동일합니다.
클래스/태그:nth-last-child(n)
:nth-child(n) 와 사용법은 동일합니다.
순서만 해당 목록의 마지막에서부터 선택되는 점이 다릅니다.
선택한 목록의 갯수가 작을 때는 끝부분에 가까운 요소들을 선택하는 것이 별 문제가 안되지만 500개, 또는 1000개 이상의 목록에서
끝부분에 가까운 어떤 요소(들)을 선택하는 경우에는 얘기가 달라집니다.
예를들어
위의 예에서
ul:nth-last-child(3)
은 3 하나만 선택됩니다.
끝에서 3번째 요소를 선택하는데 끝에서 3번째 요소가 있는 ul은 처음 ul 1개만 있기 때문입니다.
ul:nth-last-child(2n)
은 7,4,2가 선택됩니다.
각 목록의 끝에서부터 카운팅되어 선택된다는 점을 꼭 주의해야 합니다.
개념상 꼭 주의할 점이 있습니다.
위의 예에서 nth-child, nth-last-child 와 같은 한정자로 선택할 경우, 선택하는 li 태그의 부모를 기준으로해서 자식들을 한정자로 필터링해 선택합니다.
즉, li를 먼저 선택한 후 li에 대해 한정자가 적용되는게 아니라 li의 각각의 부모(ul)를 선택해 그걸 기준으로 한정자로 필터링을 합니다.
즉, 부모인 ul 을 기준으로 한정자가 개별 적용됩니다.
클래스/태그:only-child
부모를 기준으로 자식 요소가 1개만 있는 경우에만 선택됩니다.
별도의 추가 한정자는 없습니다.
특수한 경우에만 사용하기 때문에 사용 빈도가 높지는 않습니다.
예를 들어
ul:only-child
는
6이 선택됩니다.
부모를 기준으로 자식 요소가 1개만 있는 것은 6이 유일합니다.
클래스/태그:nth-of-type(n)
:nth-child(n) 와 유사하지만, 한정자 이름 그대로 타입을 우선으로 해당 타입인 자식 요소들을 필터링해 선택합니다.
클래스/태그:first-of-type, 클래스/태그:last-of-type
클래스/태그:nth-last-of-type(n)
클래스/태그:only-of-type
* :nth-child 와 :nth-of-type 의 차이점
두가지 한정자는 많은 부분에서 유사합니다. 특히 같은 타입들로만 나열된 목록에서 두가지 한정자를 사용할 경우 대부분의 경우 같은 선택 결괄르 가져옵니다.
그러나 다음과 같은 예에서
<div> <h1>제목</h1> <p>내용1</p> <p>내용2</p></div>
두가지 한정자는 전혀 다른 선택 결과를 나타냅니다.
p:nth-child(2) 는 내용1 을 선택하지만
p:nth-of-type(2) 은 내용2 를 선택합니다.
더 나아가
이런 예에서는
<div> <h1>제목</h1> <h1>서브제목</h1> <p>내용1</p> <p>내용2</p></div>
p:nth-child(2) 는 선택되는 요소가 없지만
p:nth-of-type(2) 은 내용2 를 동일하게 선택합니다.
nth-child 는 순서에 따라 2번째 요소(들)을 먼저 선택한 후 그중에서 p인 것을 찾습니다.
따라서 2번째 자식 요소인 <h1>서드제목</h1> 을 먼저 선택한 후 p 인지를 판단하기 때문에 선택된 요소가 없게 됩니다.
반면
nth-of-type 은 p 인 자식 요소(들)을 먼저 선택한 후 그중에서 2번째인 것을 찾습니다.
p 인 자식요소들을 먼저 선택하면 <p>내용1</p>, <p>내용2</p> 가 선택되고 그중 2번째인 <p>내용2</p> 가 선택됩니다.