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 ಸೆಲೆಕ್ಟರ್ ಟೆಸ್ಟರ್

ದೋಷ

CSS ಸೆಲೆಕ್ಟರ್

DOMParser is not defined

HTML ಇನ್‌ಪುಟ್

ಹೊಂದಾಣಿಕೆಗಳು

DOMParser is not defined

ತಾಂತ್ರಿಕ ವಿವರಗಳು

CSS ಸೆಲೆಕ್ಟರ್ ಟೆಸ್ಟರ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ

CSS ಸೆಲೆಕ್ಟರ್ ಟೆಸ್ಟರ್ HTML ಇನ್‌ಪುಟ್‌ಗೆ ವಿರುದ್ಧವಾಗಿ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ ಹೊಂದಿಕೆಯಾಗುವ ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ. ನೀವು ಒಂದು ಪ್ಯಾನೆಲ್‌ನಲ್ಲಿ HTML ಅನ್ನು ಪೇಸ್ಟ್ ಅಥವಾ ಟೈಪ್ ಮಾಡಿ, CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ನಮೂದಿಸಿದರೆ, ಒಟ್ಟು ಹೊಂದಿಕೆಗಳ ಎಣಿಕೆಯೊಂದಿಗೆ ಯಾವ ಎಲಿಮೆಂಟ್‌ಗಳು ಹೊಂದಿಕೆಯಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ತಕ್ಷಣವೇ ನೋಡಬಹುದು. ಇದರಿಂದ ಬ್ರೌಸರ್ DevTools ತೆರೆಯದೇ ಅಥವಾ ಲೈವ್ ಪುಟವನ್ನು ಬದಲಾಯಿಸದೇ ಸೆಲೆಕ್ಟರ್ specificity ಮತ್ತು scope ಬಗ್ಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಸಿಗುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

ಫ್ರಂಟ್‌ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ನಿಖರ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ರೂಪಿಸಲು, ಎಕ್ಸ್ಟ್ರಾಕ್ಷನ್ ಕೋಡ್ ಬರೆಯುವ ಮೊದಲು ಮಾದರಿ HTML ವಿರುದ್ಧ ಸ್ಕ್ರೇಪಿಂಗ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು, ಮತ್ತು CSS ನಿಯಮವು ಉದ್ದೇಶಿತ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಏಕೆ ಟಾರ್ಗೆಟ್ ಮಾಡುತ್ತಿಲ್ಲ ಎಂಬುದನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಈ ಸಾಧನವನ್ನು ಬಳಸುತ್ತಾರೆ. QA ಎಂಜಿನಿಯರ್‌ಗಳು ಪುಟ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ಗಳ ವಿರುದ್ಧ Cypress ಅಥವಾ Playwright ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಮಾನ್ಯಗೊಳಿಸುತ್ತಾರೆ. RSS ರೀಡರ್‌ಗಳು, ಇಮೇಲ್ ಪಾರ್ಸರ್‌ಗಳು, ಅಥವಾ ಹೆಡ್‌ಲೆಸ್ ಬ್ರೌಸರ್ ಆಟೊಮೇಶನ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ ವಿಷಯ ಎಕ್ಸ್ಟ್ರಾಕ್ಷನ್ ನಿಯಮಗಳನ್ನು ಬರೆಯಲು ಸಹ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಡೇಟಾ ಸ್ವರೂಪಗಳು, ಪ್ರಕಾರಗಳು, ಅಥವಾ ರೂಪಾಂತರಗಳು

ಈ ಸಾಧನವು CSS Selectors Level 3 ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ನ ಸಂಪೂರ್ಣ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತದೆ; ಇದರಲ್ಲಿ type selectors, class ಮತ್ತು ID selectors, operators ಹೊಂದಿರುವ 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 lists (comma-separated) ಕೂಡ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿವೆ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು

CSS ಸೆಲೆಕ್ಟರ್ ಹೊಂದಿಕೆ ಪಾರ್ಸ್ ಮಾಡಿದ DOM ರಚನೆಗೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ, raw HTML ಪಠ್ಯಕ್ಕೆ ಅಲ್ಲ — ಮುಚ್ಚದೇ ಉಳಿದ ಟ್ಯಾಗ್‌ಗಳು, implicit ಎಲಿಮೆಂಟ್‌ಗಳು (tbody), ಮತ್ತು ಬ್ರೌಸರ್ ದೋಷ ಸರಿಪಡಿಸುವಿಕೆಗಳು ನಿಜವಾದ DOM ಅನ್ನು ನೀವು ಸೋರ್ಸ್‌ನಲ್ಲಿ ನೋಡುವುದರಿಂದ ಭಿನ್ನವಾಗಿಸಬಹುದು. Pseudo-elements (::before, ::after) ನಿಜವಾದ DOM ನೋಡ್‌ಗಳು ಅಲ್ಲ ಮತ್ತು querySelector ಮೂಲಕ ಆಯ್ಕೆ ಮಾಡಲಾಗುವುದಿಲ್ಲ. XML/SVG ವಿಷಯದಲ್ಲಿನ namespace prefixes‌ಗಳಿಗೆ ವಿಶೇಷ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅಗತ್ಯ. ಮಾದರಿ HTML ಮೇಲೆ ಕೆಲಸ ಮಾಡುವ ಅತಿಯಾಗಿ specific ಸೆಲೆಕ್ಟರ್‌ಗಳು ಸ್ವಲ್ಪ ವಿಭಿನ್ನ markup ಇರುವ ಪ್ರೊಡಕ್ಷನ್ ಪುಟಗಳಲ್ಲಿ ಮುರಿಯಬಹುದು.

ಕೋಡ್‌ಗಿಂತ ಈ ಸಾಧನವನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

HTML ಸ್ನಿಪೆಟ್‌ಗಳ ವಿರುದ್ಧ ಇಂಟರಾಕ್ಟಿವ್ ಸೆಲೆಕ್ಟರ್ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ತ್ವರಿತ ಮಾನ್ಯಗೊಳಿಸುವಿಕೆಗೆ ಈ ಬ್ರೌಸರ್ ಸಾಧನವನ್ನು ಬಳಸಿ. ಪ್ರೊಡಕ್ಷನ್ ವೆಬ್ ಸ್ಕ್ರೇಪಿಂಗ್ ಅಥವಾ ಟೆಸ್ಟ್ ಆಟೊಮೇಶನ್‌ಗಾಗಿ, ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ built-in ಸೆಲೆಕ್ಟರ್ ಟೆಸ್ಟಿಂಗ್ (Playwright's page.locator, Puppeteer's page.$) ಅನ್ನು ಬಳಸಿ; ಇದು JavaScript execution, dynamic content, shadow DOM traversal, ಮತ್ತು iframe handling ಜೊತೆಗೆ ನಿಜವಾದ rendered DOM ವಿರುದ್ಧ ನಡೆಯುತ್ತದೆ—ಸ್ಥಿರ HTML matching ಇದನ್ನು ನಕಲಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.