자주 사용하는 CSS 셀렉터인데 표기법이 다소 생소해서 포스팅합니다.

한 줄로 어떻게 설명해야할지 몰라 포스팅 제목만 봐서는 이해가 잘 가지 않을 수 있습니다.

설명하자면 예를 들어 다수의 리스트 태그(li)를 이용해서 박스 형태의 타일 배열로 화면에 보여준다고 가정하겠습니다.

가로는 4개(한 줄에 4개)까지 표시되고 세로 줄 수는 리스트 개수에 따라 유동적이라고 보았을때 4번째 리스트 요소에만 margin-right:0px; 을 적용하고 싶습니다.

여기서 세로가 유동적인 것이 아닌 한계가 정해져 있다면 nth-child(4), nth-child(8), nth-child(12)… 이런식으로 처리 할 수도 있습니다. 하지만 여기선 세로의 개수를 예상 할 수 없는 경우이기 때문에 무한정 저런 방법으로 늘려갈 수는 없습니다.

그렇다면 4의 배수(4, 8, 12, 16, 20, 24..)로 셀렉터를 지정한다면 간단히 해결됩니다.

다음과 같이 지정해 줄 수 있습니다.

.my_list li:nth-child(4n+0) {margin-right:0px;}

이 구문을 간단히 설명하자면 n / 4를 했을때 나머지 값이 0이 되는 요소를 가르키는 셀렉터 입니다. 여기서 0을 1로 바꾼다면 나머지가 1로 떨어지는 경우가 해당되겠죠.