CSS 선택자 테스터

CSS 선택자 테스터가 작동하는 방식

도구가 하는 일

CSS 선택자 테스터는 HTML 입력에 대해 CSS 선택자를 평가하고 일치하는 모든 요소를 시각적으로 강조 표시합니다. 한 패널에 HTML을 붙여넣거나 입력하고 CSS 선택자를 입력하면, 총 일치 개수와 함께 어떤 요소가 일치하는지 즉시 확인할 수 있습니다. 이를 통해 브라우저 DevTools를 열거나 라이브 페이지를 수정하지 않고도 선택자의 특이성(specificity)과 범위를 즉각적으로 피드백받을 수 있습니다.

개발자들이 흔히 사용하는 사례

프론트엔드 개발자는 스타일링을 위한 정밀한 선택자를 만들고, 추출 코드를 작성하기 전에 샘플 HTML에 대해 스크래핑 선택자를 테스트하며, CSS 규칙이 의도한 요소를 타깃팅하지 않는 이유를 디버깅하는 데 이 도구를 사용합니다. QA 엔지니어는 페이지 스냅샷을 대상으로 Cypress 또는 Playwright 선택자를 검증합니다. 또한 RSS 리더, 이메일 파서, 또는 헤드리스 브라우저 자동화 스크립트를 위한 콘텐츠 추출 규칙을 작성하는 데도 유용합니다.

데이터 형식, 타입 또는 변형

이 도구는 타입 선택자, 클래스 및 ID 선택자, 연산자를 포함한 속성 선택자([attr^=value], [attr$=value]), 의사 클래스(:nth-child, :not, :first-of-type), 결합자(후손, 자식 >, 인접 형제 +, 일반 형제 ~), 그리고 의사 요소(::before, ::after)를 포함한 CSS Selectors Level 3 전체 사양을 지원합니다. 복잡한 복합 선택자와 선택자 목록(쉼표로 구분)도 완전히 지원됩니다.

흔한 함정과 엣지 케이스

CSS 선택자 매칭은 원시 HTML 텍스트가 아니라 파싱된 DOM 구조에 의존합니다 — 닫히지 않은 태그, 암묵적 요소(tbody), 그리고 브라우저의 오류 수정으로 인해 실제 DOM이 소스에서 보이는 것과 달라질 수 있습니다. 의사 요소(::before, ::after)는 실제 DOM 노드가 아니므로 querySelector로 선택할 수 없습니다. XML/SVG 콘텐츠의 네임스페이스 접두사는 특별한 처리가 필요합니다. 샘플 HTML에서 동작하는 지나치게 구체적인 선택자는 마크업이 약간 다른 프로덕션 페이지에서 깨질 수 있습니다.

코드 대신 이 도구를 사용해야 하는 경우

이 브라우저 도구는 대화형 선택자 개발과 HTML 스니펫에 대한 빠른 검증에 사용하세요. 프로덕션 웹 스크래핑이나 테스트 자동화에는 프레임워크에 내장된 선택자 테스트(Playwright의 page.locator, Puppeteer의 page.$)를 사용하세요. 이는 JavaScript 실행, 동적 콘텐츠, 섀도 DOM 탐색, iframe 처리 등 정적 HTML 매칭으로는 재현할 수 없는 실제 렌더링된 DOM을 대상으로 동작합니다.