[CSS]알아두면 유용한 nth-child 정복하기
페이지 정보
본문
항상 nth-child(숫자)만 사용하세요??
div > div === div > div:nth-child(n + 1)
왜 같은지 알아보고 다른 유용한 문법도 알아갑시다.
:nth-child(숫자)
예제로 사용할 동그라미의 구조
가장 기본적이고 가장 많이 쓰이는 nth-child 문법이다.
:nth-child(5)를 사용하면 특정 숫자번째의 자식을 지정해서 스타일을 바꿀 수 있다.
:nth-child(n + 숫자)
숫자번째를 포함한 이후의 모든 자식에게 스타일을 적용할 수 있다.
:nth-child(-n + 숫자)
이전의 방법의 반대케이스이다. 숫자번째를 포함한 이전의 모든 자식에게 스타일을 적용할 수 있다.
:nth-child(n + 숫자):nth-child(-n + 숫자)
위의 두 가지 방법을 합친 케이스이다.
n번째 자식을 포함한 이후의 모든 자식에 대해서 m번째를 포함한 이전의 모든 자식에게 스타일을 적용한 것이다.
n번부터 m번까지 범위를 정하고 싶을때 유용하다.
:nth-child(odd)
모든 홀수번째 자식에게 스타일을 적용하는 방법이다.
:nth-child(even)
모든 짝수번째 자식에게 스타일을 적용하는 방법이다.
:nth-child(n + 숫자):nth-child(odd):nth-child(-n + 숫자)
위의 세 가지 방법을 합친 케이스이다.
특정 범위 안에서 홀수 혹은 짝수의 자식들에게 스타일을 적용하는 방법이다.
:nth-child(An + B)
B번 자식부터 A개 띄어서 스타일을 적용하는 방법이다.
nth-child(An + B):nth-child(even)
추천0
- 이전글PHP에서 AJAX 사용하는 방법 23.05.30
- 다음글영카트 무통장입금 자동확인 23.05.14
댓글목록
등록된 댓글이 없습니다.
