CSS selector를 표기하는 방법중에 해당 태그의 첫 번째 순서인지, 마지막 순서인인지,
홀수/짝수 인지 등을 알 수 있는 다양한 selector 표기법이 있다.
⭐️ 다시 짚고 넘어가자ㅡ selector는 tag, .class, #id 모두 가능하다!⭐️
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
:nth-child(odd)= 부모안에 모든 요소 중 홀수 요소
:nth-child(even)= 부모안에 모든 요소 중 짝수 요소
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소
좀 더 심화된 버전이니 아래 참고하자!
:nth-child(2n)= 두번째 마다 선택
:nth-child(2n+1)= 첫번째 요소부터 2번째 마다 선택
:nth-child(2n+5)= 다섯번째 부터 2개 마다 선택
:nth-child(n+5)= 5번째 부터 모두 선택
특정 선택자를 제외하고 모든 요소에 스타일을 적용하고싶다면? 아래 예제의 코드를 활용하자!
첫번째 자식 요소를 제외한 나머지 요소에 컬러값을 적용한다.👇🏻
ul li:not(:first-of-type) {
color: red;
}마지막 자식 요소를 제외한 나머지 요소에 아래에 여백을 적용한다.👇🏻
ul li:not(:last-of-type) {
margin-bottom: 20px;
}출처: https://hohoya33.tistory.com/145 [개발 메모장:티스토리]
