CSS3 :nth-child() - 의사 클래스(Pseudo-Classes)

의사(가상) 클래스는 :hover와 :before, :active와 같은 형태로 많이 사용되고 있습니다.

그리고 현재 CSS3는 새로운 의사(가상) 클래스들을 상당히 많이 제공하여 웹을 좀 더 유연하게 제어할 수 있도록 해주고 있습니다.

이 글에서는 nth-child에 대해 중점적으로 다룰 것이고 그 외의 몇 가지 가상 클래스를 소개해 보도록 하겠습니다.

 CSS3 가상 클래스를 IE 구형 브라우저에서도 사용할 수 있는 Selectizr  포스팅보기

처음과 마지막 요소 선택

일반적으로 많이 사용하는  선택자들로 간단히 짚고 넘어가겠습니다.

• :first-child는 요소 유형(타입)에 상관없이 요소의 첫 번째 자식을 선택합니다. 이 가상 클래스는 CSS2.1에서 먼저 정의되었고 IE7+ 모든 브라우저들이 지원하고 있습니다.
• :first-of-type은 컨테이너 안에서 특정 유형(타입)의 요소에서 첫 번째를 찾습니다. 예를 들어서 p:first-of-type은 부모의 첫 번째 자식이든 아니든 상관하지 않고 첫 번째 p 요소를 선택하게 될 것입니다.
• :last-child는 요소 유형(타입)에 상관없이 요소의 마지막 자식을 선택합니다.
• :last-of-type은 :first-of-type과 정확하게 동일하지만 컨테이너의 특정 유형(타입)의 요소에서 마지막을 찾습니다.
• :only-child는 만약 컨테이너에서 자식이 하나라면 그 요소를 선택하게 됩니다. 예를 들어서 기본적인 네비게이션을 위한 마크업에서 각 <a> 엘리먼트는 일반적으로 <li> 요소의 유일한 자식일 가능성이 큽니다.
• :only-of-type은 :ony-child와 마찬가지입니다. 단지 해당 요소가 컨테이너에서 그 유형(타입)으로 유일한 하나라면 그 요소를 선택합니다. 예를 들어서 div 가 하나의 h1과 하나의 p를 포함하고 있다면 이들 각가은 해당 유형(타입)이 유일한 요소일 것입니다.

참고 : :first-child와 :first-of-type의 차이점 보기

:nth-child - n번째 자식 선택자

:nth-child 가상 클래스는 첫 번째나 마지막을 선태하는 선택자들보다 더 융통성을 발휘하여 선택할 수 있도록 도와줍니다.

즉, 다섯 번째 또는 여덟 번째... 또는 54번째 자식을 선택하고자 할 때 :nth-child()를 사용한다면 아주 쉽게 선택할 수 있습니다.

:nth-child() 를 가장 기본적으로 사용하는 방식은 다음 예와 같이 어떤 자식을 선택하고 싶은지 명확하게 명시하는 것 입니다.

html

<ul>
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li>List Item Four</li>
</ul>

css

ul li:nth-child(3) {
   color: red;
}

위 예제에서는 세번째 리스트 항목의 글자 색상은 붉은색이 될 것입니다.

그러나 예측할 수 없을 정도로 많은 리스트 항목들을 가진 경우, 그리고 마지막에서 다섯 번째 항목을 선택해야 하는 경우라면 어떻게 해야 할까요?

다행히 다른 의사 클래스를 이용하면 이런 작업을 할 수 있습니다.

:nth-last-child() 선택자는 :nth-child() 와 같은 역할을 하지만 처음부터가 아니라 마지막부터 카운트를 합니다. 그래서 li:nth-last-child(5) 는 마지막부터 다섯 번째에 해당하는 리스트 항목을 선택할 것 입니다.

게다가 좀 더 구체적으로 일치시켜야 할 필요가 있을 때 이 선택자들에서 -child 부분을 앞서 살펴보았던 예제와 같이 -of-type 으로 교체할 수도 있습니다.

예를 들어서 다음 코드를 살펴보겠습니다.

html

<article>
    <h1>Heading Top</h1>
    <p>first paragraph.</p>
    <p>second paragraph.</p>
    <p>third paragraph.</p>
    <p>fourth paragraph.</p>
</article>

css

article p:nth-of-type(3) {
    color: blue;
}

위 선택자는 세 번째 단락(third paragraph)의 글자색상을 변경하게 될 것입니다.

반면에 만약 p:nth-child(3) 선택자를 사용한다면 타입과 상관없이 컨테이너의 세 번째 자식을 대상으로 선택하게 될 것입니다.

즉, 두 번째 단락(second paragraph)을 선택하게 됩니다.

표현식을 이용하여 N번째 자식 확장하기

n번째 자식 의사(가상) 클래스는 간단한 숫자뿐만 아니라 훨씬 더 복잡한 패턴을 선택해야 할 때 횟수에 대한 표현식을 이용할 수 있습니다.

이런 표현식은 an + b; 의 포맷을 취합니다. 

즉, 예를 들어서 2n+1 은 홀수의 자식을 선택하는 것입니다.

그렇다면 이 표현식은 어떤 방식으로 동작하게 될까?

위 표현식은 간단한 수학 등식 표현으로 n은 0부터 시작하여 1씩 증가합니다.

(2 * n) + 1

(2 * 0) + 1 = 1 (첫 번째 자식을 선택한다)

(2 * 1) + 1 + 3 (세 번째 자식을 선택한다)

(2 * 2) + 1 = 5 (다섯 번째 자식을 선택한다)

(2 * 3) + 1 = 7 (일곱 번째 자식을 선택한다)

[기타 등등...]

이 표현식을 자세히 살펴보면 매번 홀수 번째 자식을 선택하는 방식이라는 것을 알 수 있습니다. 그러나 다른 방식을 사용하면 좀 더 한눈에 이해할 수 있을 것입니다.

다음 5n + 3 을 예로 하여 살펴보겠습니다.

여기서 첫 번째 숫자 [5]는 매번 다섯 번째 자식을 대상으로 선택해야 한다는 것을 나타냅니다. 그리고 두 번째 숫자인 [3]은 배열에서 시작이 되는 지점을 나타냅니다.

그래서 여기서는 세 번째 자식을 시작으로 매번 다섯 번째 자식이 선택될 것입니다.

이 예제는 즉 세 번째, 여덟 번째, 열세 번째, 열여덟 번째(등등)의 자식들이 선택될 것입니다.

n번째 자식과 키워드 활용하기

n번째 자식 의사(가상) 클래스는 정수와 표현식뿐만 아니라 두 개의 짧은 키워드 중 하나를 선택할 수도 있습니다.

이 두 개의 키워드는 odd와 even 입니다.

css

p:nth-child(odd) { color: red; }
p:nth-child(even) { color: blue; }

odd 키워드는 앞서 예제에서 살펴보았듯이 2n+1 을 축약한 것이고, even 키워드는 2n+2 또는 2n+0(또는 그냥 2n)으로 쓰일 수 있습니다.

even 키워드의 경우는 표현식에 익숙하지 않은 사람들도 즉시 알 수 있다는 장점이 있습니다.

n번째 자식과 음수 활용하기

n번째 자식 의사 클래스는 지금까지 사용했던 양수뿐만 아니라 음수도 사용할 수도 있습니다.

음수를 언제 사용할 것 인지 의구심이 생길 수도 있겠지만 실제로 몇 가지 효과적인 방식으로 음수를 사용할 수가 있습니다.

html

<ul>
    <li>1. Lorem ipsum</li>
    <li>2. dolor sit amet</li>
    <li>3. consectetur adipisicing elit.</li>
    <li>4. Dolor dolorem dolores</li>
    <li>5. excepturi iure laborum</li>
    <li>6. placeat quis</li>
    <li>7. quod soluta</li>
    <li>8. sunt voluptatum.</li>
    <li>9. Lorem ipsum dolor sit amet</li>
    <li>10. consectetur adipisicing.</li>
</ul>

위 코드와 같이 10개의 리스트 항목이 있으며 각 1,2번 항목 3~6번 항목 그리고 9,10번 항목에 적절한 스타일을 적용해야 한다면 어떻게 해야 할까?

:nth-child()를 활용하여 각 영역을 다음과 같이 정의할 수 있습니다.

css

li:first-child,
li:nth-child(2) {
    background: green;
}

li:nth-child(3),
li:nth-child(4),
li:nth-child(5),
li:nth-child(6) {
    background: blue;
}

li:last-child,
li:nth-last-child(2) {
    background: red;    
}

이와 같은 코드로도 적절한 기능은 하겠지만 총 여덟 개의 선택자를 사용, 즉 선택자들이 너무 많다는데 문제가 있습니다. 

이는 음수를 사용하면 총 선택자를 세 개로 줄일 수 있는데 각 규칙에서 세트당 하나씩으로 줄이는 것이 가능합니다.

상위 두 개의 영역을 선택하기 위해서 사용자는 -1n+2 라는 표현식을 사용할 수 있습니다.

여기서 기억할 것은 선택 과정이 두 번째 인덱스부터 시작한다는 점입니다. 여기서는 두 번째 자식이고 첫 숫자(-1)는 (두 번째 자식부터 시작하여) 각 자식이 선택되지만 음수로 방향이 반대로 나타낸다는 것 입니다. 그래서 두 번째 항목과 첫 번째 항목을 선택하게 됩니다. 

이 수식이 어떻게 동작하는지 다음 예를 통해 살펴보겠습니다.

(-1 * n) + 2 (-n+2 로도 표현할 수 있다)

(-1 * 0) + 2 = 2 (두 번째 자식이 선택된다)

(-1 * 1) + 2 = 1 (첫 번째 자식이 선택된다)

(-1 * 2) + 2 = 0 (선택없음)

그리고 두 번째 선택 항목을 선택하기 위해서 좀 더 구체적인 방법을 사용해야 한다. 

앞서 설명한 방법을 활용하여 처음 여섯 개를 -n+6 으로 선택할 수 있으며 좀 더 구체적으로 명시하기 위해 연속된 가상클래스를 사용하여 n+3을 사용할 수 있습니다.

즉, -n+6과 n+3 을 조합해 보면 선택 과정이 세번째 항목부터 시작하고 여섯 번째 항목에서 끝난다는 것을 나타낼 수 있습니다.

css

li:nth-child(-n+2) {
    color: green;
}

li:nth-child(-n+6):nth-child(n+3) {
    color: blue;
}
    
li:nth-last-child(-n+2) {
    color: red;
}

위의 코드는 처음에 살펴 본 방법보다 훨씬 간결해졌습니다. 

마지막 항목은 앞서 설명한 방법과 동일하며 nth-last-child 로 대체했을 뿐입니다.

test code : nth-child 

See the Pen nth-child test by jaeheekim (@jaehee) on CodePen.

nth-child 활용 #1

See the Pen nth-child 활용하기 #1 by jaeheekim (@jaehee) on CodePen.

nth-child 활용 #2

See the Pen nth-child 활용하기 #2 by jaeheekim (@jaehee) on CodePen.

nth-child 활용 #3

See the Pen nth-child 활용하기 #3 by jaeheekim (@jaehee) on CodePen.

기타 선택자들 중 가장 활용도 높은 선택자들

이제 n번째 자식 선택자에 대한 주제를 거의 다 다루었지만 매우 유용한 몇 가지 가상(의사) 클래스가 아직 더 남아 있습니다.

이들 중 대부분은 아직 일반적으로 활용되는 단계는 아닙니다.

다음의 모든 선택자들은 IE9+ 와 주요 모던 브라우저에서 지원하고 있습니다. 

아직 일반적으로 활용되는 단계는 아니지만 위에 소개한 selectizr 와 함께라면 가능할 것입니다.

• :empty는 콘텐츠나 자식이 없는 요소들을 선택합니다. 엘리먼트 내에 스페이스 빈 공간이라도 있다면 그 요소는 비어있는 요소가 아니기 때문에 선택할 수 없습니다.
• :not(x)는 부정 의사 클래스라고 하며, X를 제외한 모든 제외한 모든 요소들을 선택할 때 사용할 수 있습니다. 여기서 X는 또 다른 선택자(e.g. .demo)입니다.
• :target은 문서의 URI에서 부위 식별자(fragment identifier)의 목표가 되는 요소를 선택합니다. 예를 들어서 주소창에서 #demo가 URI의 끝부분에 나오게 된다면 :target을 사용하여 #demo라는 id를 가진 HTML상의 요소를 선택할 수 있습니다.

위 선택자들은 모두 유용하고 편리합니다. 특히 :target의 경우는 편리함 이상의 것을 얻을 수 있습니다. 

예를 들어 id 속성을 앵커로 사용할 때 같은 페이지에 있는 다른 영역에 링크를 연결할 수 있는 기능을 많이 사용할 것입니다. 이때 URI의 끝부분에 id 앵커를 삽입하게 되는데 :target을 사용하여 스타일을 가미할 수 있습니다.

다시말해, :target을 사용하게 되면 특정 요소를 클릭할 경우 해당 요소의 CSS 스타일을 변경할 수 있습니다.

마지막으로 설명할 몇 가지 가상 클래스는 모두  form 요소와 관계가 있습니다.

• :disabled는 예를 들어 disabled  HTML5 속성을 사용하는 텍스트 입력처럼 어떤 식으로든 포커스되지 못하거나 선택 받지 못하는 요소들을 선택합니다.
• :enabled는 기본 상태에서 선택될 준비가 되어 있는 요소들을 선택합니다. 즉 :disabled를 사용하여 선택할 수 없는 것들을 선택합니다.
• :checked는 사용자가 선택한 라디오 버튼이나 체크박스를 대상으로 합니다.

:checked는 CSS3를 실험할 때 가장 잠재력을 인정받고 있는 선택자로 앞서 언급했던 고급 선택자들과 함께 사용하면 폼 요소를 클릭할 때 CSS를 변경하는데 사용될 수 있는 유용한 선택자입니다.

게다가 id와 페이지 점프처럼 :target의 경우는 클릭 상태의 CSS를 변경하고자 할 때 작업하기 어려워지는 문제점들이 있는데 :checked는 이런 문제점들로부터 자유롭습니다.

Jaehee's WebClub