nth-child
nth-child : 여러개의 요소를 생성하고 각 요소에 따로 속성을 부여할 때 사용
이미지에 30개의 div태그를 만들었다.
css에 div태그를 사용하면 전체적으로 적용되서 각각의 요소에 적용하려면 class나 id를 사용해야 하지만 div: nth-child {}를 사용하면 각각의 요소에 속성을 적용 할 수 있다.
first-child
first-child는 처음 요소에 속성을 적용한다.
다른 요소들은 적용되지 않으며 오직 첫 번째 요소에만 적용한다.
last-child
last-child는 마지막 요소에 속성을 적용한다.
first와 마찬가지로 다른 속성에는 적용되지 않고 마지막 요소에만 적용한다.
nth-child(번호)
nth-child는 적용한 번호에 속성을 부여하는 것이다.
이미지에는 nth-child(7)에 background-color: pink;를 적용하기 때문에 7번째에 있는 요소에 pink라는 배경의 속성을 부여한 것이다.
또 다른 예시로 숫자가 아닌 다른 번호를 넣을 수 있다.
해당 예시는 정수가 아닌 2n이라고 적었는데 2의 배수마다 orange라는 배경이 적용된 것을 확인 할 수 있다.
nth-child는 괄호 안에 정수가 아닌 n을 추가한 사칙연산식으로 적용이 가능하다.
(FOR문을 돌리는 것처럼 생각하면 이해가 쉽다.)
위 이미지처럼 7n+2 라고 적으면 (7 x n)+2에 자리마다 grey색상이 입혀진 것을 볼 수 있다.
첫 번째는 (7 x 0)+2 → 두 번째 자리
두 번째는 (7 x 1)+2 → 아홉 번째 자리
...
다섯 번째는 (7 x 4)+2 → 서른 번째 자리
에 적용 되었다 !
nth-child 사용
