CSS 선택자 테스터
HTML과 CSS 선택자를 붙여넣으면 선택자가 매칭하는 모든 요소를 즉시 확인할 수 있습니다. 매칭 개수와 각 요소의 마크업이 표시됩니다. 브라우저 자체 선택자 엔진을 사용하므로 결과가 document.querySelectorAll과 동일합니다 — 스크래퍼, 스타일시트, 테스트 선택자 디버깅에 유용합니다. 잘못된 선택자는 표시됩니다. 모든 처리는 브라우저에서 로컬로 실행되며 아무것도 업로드되지 않습니다.
—
사용법
- 첫 번째 상자에 HTML을 붙여넣습니다.
- CSS 선택자를 입력합니다(예: li.item 또는 a[href^="https"]).
- 매칭 개수와 각 매칭 요소를 확인하고 필요하면 복사합니다.
자주 묻는 질문
- 어떤 선택자를 지원하나요?
- 결합자, 속성 선택자, :not(), :nth-child() 등 querySelectorAll로 브라우저가 지원하는 모든 선택자를 지원합니다. ::before 같은 의사 요소는 DOM과 마찬가지로 아무것도 매칭하지 않습니다.
- 결과가 정확한가요?
- 예. HTML을 실제 문서로 파싱하고 브라우저 네이티브 선택자 엔진으로 질의하므로, 해당 마크업에서 querySelectorAll이 반환하는 것과 정확히 일치합니다.
- 선택자가 잘못되면 어떻게 되나요?
- 오해를 줄 수 있는 결과를 반환하는 대신 선택자 필드가 강조되고 오류 메시지가 표시됩니다.
- 제 HTML이 어딘가로 전송되나요?
- 아니요. 파싱과 매칭은 전적으로 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.
관련 도구
CSS 명시도 계산기
CSS 셀렉터의 (ID, 클래스, 타입) 명시도 계산. 토큰별 가중치 표시 및 두 셀렉터 비교.
개발 0 0
HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
개발 0 0
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상 0 0
정규식 테스터
자바스크립트 정규식을 실시간으로 테스트하고 매치 강조와 치환 미리보기를 확인하세요.
개발 0 0
Glob 패턴 테스터
파일 경로를 glob 패턴(*, **, ?, [...], {a,b})에 대해 브라우저에서 테스트합니다.
개발 0 0
CSS 색상 이름
147개 CSS / X11 named color — HEX·RGB·실시간 스와치, 검색·색상 계열별 그룹화.
색상 0 0