이 도구 소개

입력한 CSS 선택자를 작은 HTML 샘플에 적용해 일치한 요소를 나열합니다. 분석은 DOMParser로 브라우저 안에서 이뤄지므로 내용이 외부로 전송되지 않습니다.

사용 방법

선택자와 HTML 샘플을 수정한 뒤 테스트를 실행해 일치 개수와 뽑힌 조각을 확인하세요. querySelector에 대한 짐작을 검증하기에 좋습니다.

샘플에는 자식 제목을 가진 .card와 클래스가 없는 형제 요소가 들어 있습니다.

입력

div.card > h2

출력

1 match(es): <h2>…</h2>

:nth-child나 자손 선택자와 자식 선택자의 차이를 설명할 때도 쓸 만합니다.

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

아니요. 샘플은 이 페이지에서 브라우저 자체 DOMParser로 파싱되고, 선택자는 querySelectorAll로 실행됩니다.

유효한 선택자인데 일치 항목이 0개인 이유는?

대개 결합자나 클래스 이름이 한 단계 어긋나 있습니다. 자식(>)과 후손(공백)을 구분해 확인하고, 클래스 철자를 샘플 마크업과 비교해 보세요.