CSS 선택자 테스터
HTML에 대해 CSS 선택자를 테스트하고 어떤 요소가 매칭되는지 정확히 확인합니다. 브라우저에서 동작합니다.
사용법
- 첫 번째 상자에 HTML을 붙여넣습니다.
- CSS 선택자를 입력합니다(예: li.item 또는 a[href^="https"]).
- 매칭 개수와 각 매칭 요소를 확인하고 필요하면 복사합니다.
자세한 설명
펼치기접기
HTML과 CSS 선택자를 붙여넣으면 선택자가 일치시키는 모든 요소를 개수와 각 결과의 마크업과 함께 볼 수 있습니다. 브라우저 자체의 선택자 엔진에서 실행되므로, 결과가 실제 페이지에서 document.querySelectorAll이 돌려주는 것과 동일합니다. 실제 사이트로 돌아가기 전에 스크레이퍼나 스타일시트, 잘 깨지는 테스트 선택자를 디버깅하기에 유용한 이유가 이것입니다. 잘못된 선택자는 조용히 빈 결과를 내지 않고 오류로 표시됩니다. 파싱은 되었지만 렌더링되지 않은 문서를 다루는 데서 두 가지가 따라옵니다. :hover, :visited, :target처럼 실시간 상태나 레이아웃에 의존하는 선택자는 일치하지 않습니다. 그리고 HTML은 완전한 HTML 규칙으로 파싱되므로, 표 밖에 홀로 놓인 행 같은 조각은 브라우저가 버리는 것과 똑같이 버려집니다.
자주 묻는 질문
어떤 선택자를 지원하나요?
결합자, 속성 선택자, :not(), :nth-child() 등 querySelectorAll로 브라우저가 지원하는 모든 선택자를 지원합니다. ::before 같은 의사 요소는 DOM과 마찬가지로 아무것도 매칭하지 않습니다.
결과가 정확한가요?
예. HTML을 실제 문서로 파싱하고 브라우저 네이티브 선택자 엔진으로 질의하므로, 해당 마크업에서 querySelectorAll이 반환하는 것과 정확히 일치합니다.
선택자가 잘못되면 어떻게 되나요?
오해를 줄 수 있는 결과를 반환하는 대신 선택자 필드가 강조되고 오류 메시지가 표시됩니다.
제 HTML이 어딘가로 전송되나요?
아니요. 파싱과 매칭은 전적으로 브라우저에서 이루어지며 아무것도 업로드되지 않습니다.
여기서는 :hover가 왜 아무것도 일치시키지 못하나요?
문서가 파싱만 되고 렌더링되거나 상호작용하지는 않기 때문입니다. 포인터도, 방문 기록도, 레이아웃도 없습니다. :hover, :focus, :visited, :target처럼 실시간 상태에 의존하는 선택자는 참이 될 근거 자체가 없습니다. :nth-child부터 :has까지 구조에 관한 것은 모두 정상 동작합니다.
붙여넣은 조각에서 행이 사라졌습니다. 왜죠?
HTML 파서가 브라우저와 같은 규칙을 적용하는데, 표의 행은 표 안에서만 유효합니다. tr이나 td만 있는 조각은 실제 페이지에서와 똑같이 버려집니다. table 요소로 감싸면 선택자가 찾아냅니다.
관련 도구
CSS 명시도 계산기
CSS 셀렉터의 (ID, 클래스, 타입) 명시도 계산. 토큰별 가중치 표시 및 두 셀렉터 비교.
개발
HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
개발
XPath 테스터
브라우저에서 XML이나 HTML에 XPath 식을 실행해 일치하는 모든 노드를 봅니다. 네임스페이스 접두어와 해석 오류도 함께 보고합니다.
개발
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상·CSS
CSS 색상 이름
147개 CSS / X11 named color — HEX·RGB·실시간 스와치, 검색·색상 계열별 그룹화.
색상·CSS
정규식 테스터
자바스크립트 정규식을 실시간으로 테스트하고 매치 강조와 치환 미리보기를 확인하세요.
개발