선택자 :nth-child에 대해 알아보자
내 자식만 고를 거야.다른놈은 빠져있어.
형태: 태그:nth-child(n)
의미:효과를 적용할 태그 에서 n번째들의 코드(들)을 선택한다.
예: pnth-chid(3) p태그에서 3번째의 p태그를 선택한다.
단. n번째줄에 p태그가 아닌 다른 태그가 있을 경우. 선택안된다.
태그를 세분하게 선택하자.
예로 div태그 안에 p태그를 선택할 경우.
div>p:nth-child(n) {
효과 적용
}
n은 수식이 있어야 빛난다.
()안에는 수식을 넣을 수 있다. 쉽게는 n만 정해 n번째만 선택가능 하고.
2n은 2의 배수, 3n=3의 배수
범위 또한 정할 수 있다. 예:(n+2),(-n+9)
자식태그인게 중요하다.
코드를 배우다보면 부모자식 관계의 위계를 알게 되는데.
child선택자는 자식으로 속해있는지를 봐야한다.
단점은 존재한다.
유지 보수하기가 힘들다.nth-child는 정한 태그가 맞아야 선택되어 적용되는데,
그중 다른 태그가 간섭하는 일이 생기면 적용이 안된다.
코드가 수백만-수억코드라고 가정했을때, 변경해야할 일이 생긴다면,
바로 지옥문 개방. 🙉