Web

개요 CSS에서 선택자는 DOM에서 스타일을 적용할 대상 요소 집합을 정의하는 식 컴포넌트 스코프와 일관된 스타일링, 유지보수 비용에 직접 영향 핵심 유형과 매칭 원리, 명시도와 베스트프랙티스 중심 요약 핵심 개념 타입 선택자 tag 특정 태그 타깃 클래스 선택자 .class 재사용 가능한 스타일 단위에 적합 아이디 선택자 #id 고유 요소 타깃, 명시도 높음 속성 선택자 [attr], [attr=value], [attr*=substr] 속성 값 기반 매칭 가상 클래스 :hover, :focus, :active, :not(), :is() 상태나 집합 표현 가상 요소 ::before, ::after 논리적 하위 요소 생성 결합자 A B 하위, A > B 자식, A + B 인접 형제, A ~ B 일반 형제 관계 표현 그룹 A, B 동일 스타일의 대상 묶음 최신 선택자 :has() 부모가 특정 자식을 가질 때 매칭, 브라우저 지원 범위 확인 권장 동작 원리와 명시도 브라우저는 각 규칙의 선택자를 DOM 노드에 대조해 매칭된 규칙을 수집 후 명시도와 소스 순서로 충돌 해결 명시도 계산 규칙 요약 ...

개요 CSS :nth-child() 의사 클래스는 같은 부모를 공유하는 형제 요소들 가운데 순서를 기준으로 요소를 선택하는 선택자임 인덱스는 1부터 시작함 참고로 nth는 n-th 서수 개념을 뜻함 핵심 개념 odd, even 키워드 지원 odd는 1, 3, 5처럼 형제 중 홀수번째 요소를 의미함 even은 2, 4, 6처럼 형제 중 짝수번째 요소를 의미함 함수형 표기 <An+B> 지원 A는 정수 계수로 증가 간격을 의미함 B는 정수 오프셋 의미 n은 0 이상 정수 전체를 순회하는 변수 의미 An+B가 1 이상인 자연수로 평가되는 위치만 선택됨 :nth-child()는 요소 타입과 무관하게 형제 목록 전체를 기준으로 순서를 계산함 즉 span:nth-child(2n+1)에서 카운팅은 모든 자식 요소를 포함하고, 선택 자체만 span에 한정됨 타입별 순서를 기준으로 선택하려면 :nth-of-type() 사용 p:nth-child(n)은 형제 그룹 내 모든 p와 동일한 집합을 선택하나, 단순 p보다 명시도는 더 높음 p:nth-child(1) 또는 p:nth-child(0n+1)은 :first-child와 동일한 의미와 명시도를 가짐 동작 원리 An+B가 만드는 수열이 매칭 인덱스를 결정함 예) 5n은 0, 5, 10, 15, …를 생성하나 인덱스는 1부터 시작하므로 0은 매칭되지 않음 예) n+7은 7, 8, 9, …로 7번째 이후 전부 매칭됨 예) 3n+4는 4, 7, 10, 13, … 매칭됨 예) -n+3은 3, 2, 1 순으로 해석되어 결과적으로 앞의 3개가 매칭됨 카운팅 단위는 요소 노드 기준임 공백 텍스트 노드 등은 포함하지 않음 선택자 예시 tr:nth-child(odd) 또는 tr:nth-child(2n+1) HTML 표의 홀수번째 행 선택 tr:nth-child(even) 또는 tr:nth-child(2n) HTML 표의 짝수번째 행 선택 :nth-child(7) 임의의 7번째 요소 선택 :nth-child(5n) 5, 10, 15, …번째 요소 선택 0은 선택되지 않음 :nth-child(n+7) 7번째부터 끝까지 선택 :nth-child(3n+4) 4, 7, 10, 13, …번째 요소 선택 :nth-child(-n+3) 앞에서 3개 요소 선택 p:nth-child(n) 형제 그룹 내 모든 p 선택 단순 p보다 명시도 높음 p:nth-child(1) 또는 p:nth-child(0n+1) 형제 그룹 내 첫 번째 p 선택 :first-child와 동일 짧은 스니펫 /* 목록의 두 번째 <li> 선택 */ li:nth-child(2) { color: lime; } /* 4의 배수 번째 요소 선택 */ :nth-child(4n) { color: lime; }주의사항 :nth-child()는 형제 전체를 기준으로 순서를 매김 타입이 섞여 있으면 카운트에 모두 포함됨 타입에 따라 카운트를 분리하고 싶다면 :nth-of-type() 사용 A, B는 정수만 허용 공백과 부호 위치는 CSS 구문 규칙을 따름 0 또는 음수로 평가되는 위치는 매칭되지 않음 명시도는 타입 선택자보다 높고, 클래스와 동일 계층의 의사 클래스 수준으로 취급됨 최신 사양에서는 of 구문을 통해 :nth-child(An+B of S)처럼 선택자 리스트를 한정하는 패턴이 가능함 브라우저 호환성은 문서와 지원 현황 확인 권장 베스트 프랙티스 단순 패턴은 odd, even으로 표현해 가독성 확보 복잡한 패턴은 An+B를 사용하되, 수열을 1 이상 범위로 명확히 환산해 주석으로 의도 기록 섞인 타입 환경에서의 혼동을 피하려면 가능하면 :nth-of-type() 우선 검토 특정 구간 필터링은 교집합 패턴을 사용 예 p:nth-child(n+8):nth-child(-n+15)로 8~15 범위를 표현 접근성 측면에서 시각 강조용 스타일만 바꾸는 경우 DOM 순서 의존 로직과 결합하지 않도록 주의 간단 비교 nth-child vs nth-of-type nth-child 형제 전체 기준 카운트 타입 섞임에 영향 받음 nth-of-type 동일 태그 타입만 카운트 다른 타입은 건너뜀 마무리 :nth-child()는 CSS에서 반복적 패턴과 구간 선택을 간결하게 표현하는 기본 도구임 An+B를 수열 관점으로 해석하고, 타입 혼재 여부에 따라 nth-child와 nth-of-type을 구분 적용하면 예측 가능한 스타일링이 가능함 필요 시 최신 of 구문과 명시도 특성을 함께 고려해 유지보수 비용을 낮추는 전략 추천 ...