[CSS] n의 배수에 해당하는 순서를 지정할 수 있는 셀렉터

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

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

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

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

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

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

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

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

Published by HyungJin

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

%d 블로거가 이것을 좋아합니다: