What is a CSS selector?

A CSS selector is a pattern used to select and style HTML elements. Selectors can target elements by tag name (div), class (.my-class), ID (#my-id), attribute ([href]), pseudo-class (:hover), or combinations thereof. CSS selectors are also used in JavaScript via querySelectorAll() to find elements in the DOM.

What selector syntax does this tester support?

This tester uses the browser's native querySelectorAll() engine, so it supports the full CSS Selectors Level 4 specification — including descendant (A B), child (A > B), adjacent sibling (A + B), general sibling (A ~ B), attribute selectors ([attr=value]), pseudo-classes (:nth-child, :not, :is, :where, :has), and pseudo-elements (::before, ::after).

How do I select elements by class or ID?

Use a dot prefix for classes (.my-class) and a hash prefix for IDs (#my-id). You can combine selectors to narrow results: div.card selects elements with class 'card', and #header .nav-link selects elements with class 'nav-link' that are descendants of the element with ID 'header'.

What is the difference between :nth-child and :nth-of-type?

:nth-child(n) counts all sibling elements regardless of tag, then applies the style if the element matches the selector. :nth-of-type(n) counts only siblings of the same tag type. For example, li:nth-child(2) selects the second child if it is a , while li:nth-of-type(2) selects the second among its siblings.

เครื่องมือทดสอบ CSS Selector

ข้อผิดพลาด

ตัวเลือก CSS

DOMParser is not defined

อินพุต HTML

รายการที่ตรงกัน

DOMParser is not defined

รายละเอียดทางเทคนิค

เครื่องมือทดสอบ CSS Selector ทำงานอย่างไร

เครื่องมือนี้ทำอะไร

เครื่องมือทดสอบ CSS Selector จะประเมิน CSS selector กับอินพุต HTML และไฮไลต์องค์ประกอบที่ตรงกันทั้งหมดแบบเห็นภาพ คุณวางหรือพิมพ์ HTML ในแผงหนึ่ง ใส่ CSS selector แล้วจะเห็นทันทีว่าองค์ประกอบใดตรงกันพร้อมจำนวนรายการที่ตรงทั้งหมด สิ่งนี้ช่วยให้ได้ฟีดแบ็กทันทีเกี่ยวกับความจำเพาะและขอบเขตของ selector โดยไม่ต้องเปิด DevTools ของเบราว์เซอร์หรือแก้ไขหน้าเว็บจริง

กรณีการใช้งานทั่วไปของนักพัฒนา

นักพัฒนา Frontend ใช้เครื่องมือนี้เพื่อสร้าง selector ที่แม่นยำสำหรับการจัดสไตล์ ทดสอบ selector สำหรับการสแครปกับ HTML ตัวอย่างก่อนเขียนโค้ดดึงข้อมูล และดีบักว่าทำไมกฎ CSS ถึงไม่เล็งไปยังองค์ประกอบที่ต้องการ วิศวกร QA ตรวจสอบ selector ของ Cypress หรือ Playwright กับสแนปช็อตของหน้า นอกจากนี้ยังมีประโยชน์สำหรับการเขียนกฎการดึงเนื้อหาสำหรับตัวอ่าน RSS ตัวแยกวิเคราะห์อีเมล หรือสคริปต์อัตโนมัติของเบราว์เซอร์แบบ headless

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

เครื่องมือนี้รองรับสเปก CSS Selectors Level 3 อย่างครบถ้วน รวมถึง type selectors, class และ ID selectors, attribute selectors พร้อมตัวดำเนินการ ([attr^=value], [attr$=value]), pseudo-classes (:nth-child, :not, :first-of-type), combinators (descendant, child >, adjacent sibling +, general sibling ~) และ pseudo-elements (::before, ::after) รองรับ compound selectors ที่ซับซ้อนและรายการ selector (คั่นด้วยจุลภาค) อย่างเต็มรูปแบบ

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

การจับคู่ CSS selector ขึ้นอยู่กับโครงสร้าง DOM ที่ถูกพาร์ส ไม่ใช่ข้อความ HTML ดิบ — แท็กที่ไม่ปิด องค์ประกอบที่ถูกแทรกโดยปริยาย (tbody) และการแก้ไขข้อผิดพลาดของเบราว์เซอร์อาจทำให้ DOM จริงแตกต่างจากที่เห็นในซอร์ส pseudo-elements (::before, ::after) ไม่ใช่โหนด DOM จริงและไม่สามารถถูกเลือกด้วย querySelector ได้ พรีฟิกซ์เนมสเปซในเนื้อหา XML/SVG ต้องมีการจัดการเป็นพิเศษ selector ที่จำเพาะเกินไปซึ่งใช้ได้กับ HTML ตัวอย่างอาจพังบนหน้าโปรดักชันที่มีมาร์กอัปต่างกันเล็กน้อย

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือในเบราว์เซอร์นี้สำหรับการพัฒนา selector แบบโต้ตอบและการตรวจสอบอย่างรวดเร็วกับสไนปเป็ต HTML สำหรับการสแครปเว็บในโปรดักชันหรือการทำเทสต์อัตโนมัติ ให้ใช้การทดสอบ selector ที่มีมาในเฟรมเวิร์กของคุณ (Playwright's page.locator, Puppeteer's page.$) ซึ่งทำงานกับ DOM ที่เรนเดอร์จริงพร้อมการรัน JavaScript เนื้อหาแบบไดนามิก การไล่ผ่าน shadow DOM และการจัดการ iframe ซึ่งการจับคู่ HTML แบบสแตติกไม่สามารถทำซ้ำได้