css 선택자 nth-child 및 nth-of-type 괄호에 플러스, 마이너스, 곱하기 수식사용

괄호안에 수식을 사용해서 자식요소 선택하기

저번 포스팅에서는 선택자 nth-child와 nth-of-type에 대해서 썼었습니다. 각각의 선택자의 공통점과 궁금했었던 class와 사용시 어떻게 동작하는지 정리를 해보았습니다. 

css 선택자 :nth-child, :nth-of-type

css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의

nth-child와 nth-of-type를 사용할 때에는 보통  nth-child(1), nth-of-type(1)과 같이 숫자를 넣어서 사용하게 됩니다. 

 

숫자를 넣어서 사용하는 방법

nth-child(1)과 같이 괄호 안에 숫자를 넣어 해당 요소가 부모 안에서 몇번째 요소인지를 선택할 수 있습니다. 자바스크립트나 제이쿼리에서는 요소를 선택할때 '0'부터 세지만, css에서는 조금 더 직관적으로 '1'부터 세기 때문에 첫번째 요소를 선택할 시 nth-child(1) 혹은 nth-of-type(1) 처럼 괄호 안에 '1'을 써주면 됩니다. 

 

보통은 이렇게 숫자를 넣어서 사용하게 됩니다. 하지만 괄호 안에 숫자 대신 수식이나 혹은 문자를 사용해서 부모 안의 요소들을 선택할 수 있습니다. 이러한 방법들은 하나 이상의 자식 요소를 선택할 때 더 간단하고 효율적으로 선택할 수 있어 알아두면 좋습니다.

 

문자 'even'이나 'odd'를 사용하는 방법

even은 짝수, odd는 홀수를 뜻합니다. 따라서 nth-child(even) 혹은 nth-of-type(even)이라고 사용하면 부모 내의 자식들 중 '짝수' 번째에 있는 자식 요소들이 선택되게 됩니다. 반대로 'odd'를 넣어 사용한다면, 홀수 번째의 자식요소들이 선택되게 됩니다. 아래와 같은 리스트 스타일의 경우 자식요소들을 개별적으로 선택하지 않아도 even이나 odd를 사용할 경우 한번에 선택해서 background의 색을 변경 할 수 있습니다.

li:nth-child(even) {
    background: #e8e8e8
}

괄호 안에 even을 넣어서 만든 list style

수식을 사용하는 방법

플러스나 마이너스 기호를 사용해서 선택하는 방법

(n+2) 혹은 (-n+3) 등의 형식으로 쓰입니다. 이 때 'n' 자리에는 그냥 'n' 혹은 '-n'이 올 수 있으며 뒤에 '+숫자'의 경우 '-'가 오는 경우는 없으며 '+ 숫자'의 형태로 있습니다. 

(n+2)의 경우 '첫번째를 제외하고 두번째부터' 자식요소가 선택 됩니다. 반대로 (-n+2)의 경우는 '첫번째부터 차례대로 두번째까지' 선택되게 됩니다. 

/*왼쪽*/
li:nth-child(n+2) {
    color: #red;
}
 
/*오른쪽*/
li:nth-child(-n+2) {
    color: #red;
}

왼쪽 (n+2) 사용, 오른쪽 (-n+2) 사용

---

경우에 따라서는 이 둘을 '함께' 사용하여 '교집합'을 표현할 수 있습니다. 

예를 들면 ':nth-child(n+2):nth-child(-n+4)' 라고 두 수식을 합쳐서 사용할 경우 전자는 '2번째부터 끝까지'를 뜻하고 후자의 경우는 '처음부터 네번째까지'를 뜻하므로 First, Second, Third, Fourth, Fifth 중  둘의 교집합인 3, 4가 선택되어 집니다.

둘 모두를 사용하여 교집합을 나타낸 예시

 

곱하기를 사용해서 선택하는 방법

괄호 안에 '2n'이나 '2n+2' 혹은 '-2n+2'와 같이 곱하기 기호를 사용해서 수식을 만든 후 자식 요소를 선택할 수도 있습니다. 괄호안에 :nth-child(2n) 만 사용할 경우 2의 배수마다 선택이 되기때문에 짝수들이 선택이 되며 숫자에 따라서 3의 배수가 선택되기도, 5의 배수가 선택되기도 합니다. 

여기에 +나 -를 사용해서 자식 요소를 선택할 수 있는데, 이전에 '플러스나 마이너스 기호를 사용하는 방법' 과 같은 의미로 사용하면 됩니다. 

마찬가지로 n자리에는 '2n'이 될 수도 있으며 '-2n' 이 될 수도 있으며 뒤에 + 자리에는 '음수가 아닌 양수만 위치하게 됩니다.'

곱하기와 플러스, 마이너스 기호를 함께 사용하여 자식요소를 선택한 예

(2n+2)의 경우 '2n'이 음수가 아닌 양수기 때문에 다음의 '+2'는 '두번째 부터'라는 의미로 2번째~5번째의 범위 중 2의 배수가 선택됩니다. 

(-2n+2)의 경우 '-2n'이 음수기 때문에 '+2'는 '처음부터 두번째까지'의 의미로 첫 번째, 두 번째 범위 안에서 2의 배수가 선택됩니다.

 

마치며

알아두면 정말 다양한 선택자를 class 없이도 선택 할 수 있는 수식입니다. 프로젝트의 규모가 클 경우 재사용성을 높히기 위해서는 선택자만 사용하는 것보다 class를 사용하는 것이 좋지만, 알아두면 코드의 양을 줄일 수 있는 곳에서 확실히 줄일 수 있는 수식인것 같습니다.