9/6 - nth-child

nth-child 범위 선택

선택자 nth-child 범위 ( n번 부터 n번까지 ) (tistory.com)

선택자 nth-child 범위 ( n번 부터 n번까지 )

맨 마지막 요소 몇개의 margin 등을 빼고 싶어서 nth-child를 범위로도 사용할 수 있을지 찾아보았다.

윗 글에서 정리되어 있으며 정리해보면 다음과 같다.

nth-child(1)	첫 번째 요소
nth-last-child(1)	마지막 첫 번째 요소
nth-child(n + 2)	두 번째 요소 ~ 모든 요소
nth-last-child(n + 2)	마지막 두 번째 요소 ~ 모든 요소
nth-child(-n + 2)	첫 번째 요소 ~ 두 번째 요소
nth-last-child(-n + 2)	마지막 첫 번째 요소 ~ 마지막 두 번째 요소

n을 조합해서 범위로 선택할 수 있다.

단, n은 몇 번째 요소부터 전부, -n은 첫 번째 요소에서 몇 번째 요소까지 라는 의미로

의미가 상이하니 유의하는 것이 좋겠다.

width : 100%; height : 100%;의 input이 삐져나오는 문제

[CSS] input width 100% 삐져나오는 현상 (tistory.com)

[CSS] input width 100% 삐져나오는 현상

윗 글을 확인하면 간단하게 box-sizing : border-box; 를 통해 해결할 수 있다.

외곽선의 너비가 input 크기에 포함된다는 이유 때문에 그렇다고 한다.