CSS 선택자 테스터

사용법

1. 첫 번째 상자에 HTML을 붙여넣습니다.
2. CSS 선택자를 입력합니다(예: li.item 또는 a[href^="https"]).
3. 매칭 개수와 각 매칭 요소를 확인하고 필요하면 복사합니다.

자주 묻는 질문

어떤 선택자를 지원하나요?

결합자, 속성 선택자, :not(), :nth-child() 등 querySelectorAll로 브라우저가 지원하는 모든 선택자를 지원합니다. ::before 같은 의사 요소는 DOM과 마찬가지로 아무것도 매칭하지 않습니다.

결과가 정확한가요?

예. HTML을 실제 문서로 파싱하고 브라우저 네이티브 선택자 엔진으로 질의하므로, 해당 마크업에서 querySelectorAll이 반환하는 것과 정확히 일치합니다.

선택자가 잘못되면 어떻게 되나요?

오해를 줄 수 있는 결과를 반환하는 대신 선택자 필드가 강조되고 오류 메시지가 표시됩니다.

제 HTML이 어딘가로 전송되나요?

아니요. 파싱과 매칭은 전적으로 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.

관련 도구