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 انتخاب‌گرهای CSS را در برابر ورودی HTML ارزیابی می‌کند و همهٔ عناصر مطابق را به‌صورت بصری برجسته می‌کند. شما HTML را در یک پنل جای‌گذاری یا تایپ می‌کنید، یک انتخاب‌گر CSS وارد می‌کنید و فوراً می‌بینید کدام عناصر مطابق هستند، همراه با تعداد کل تطابق‌ها. این کار بدون نیاز به باز کردن DevTools مرورگر یا تغییر یک صفحهٔ زنده، بازخورد فوری دربارهٔ اختصاصیت و دامنهٔ انتخاب‌گر فراهم می‌کند.

موارد استفادهٔ رایج برای توسعه‌دهندگان

توسعه‌دهندگان فرانت‌اند از این ابزار برای ساخت انتخاب‌گرهای دقیق برای استایل‌دهی، آزمودن انتخاب‌گرهای اسکرپینگ در برابر HTML نمونه پیش از نوشتن کد استخراج، و عیب‌یابی اینکه چرا یک قانون CSS عناصر موردنظر را هدف نمی‌گیرد استفاده می‌کنند. مهندسان QA انتخاب‌گرهای Cypress یا Playwright را در برابر اسنپ‌شات‌های صفحه اعتبارسنجی می‌کنند. همچنین برای نوشتن قوانین استخراج محتوا برای RSS readerها، تجزیه‌گرهای ایمیل یا اسکریپت‌های اتوماسیون مرورگر بدون‌واسطه (headless) مفید است.

قالب‌ها، نوع‌ها یا گونه‌های داده

این ابزار از مشخصات کامل CSS Selectors Level 3 پشتیبانی می‌کند، از جمله انتخاب‌گرهای نوع، انتخاب‌گرهای کلاس و ID، انتخاب‌گرهای ویژگی با عملگرها ([attr^=value]، [attr$=value])، شبه‌کلاس‌ها (:nth-child، :not، :first-of-type)، ترکیب‌کننده‌ها (فرزندِ دور، فرزند >، همسایهٔ مجاور +، همسایهٔ عمومی ~)، و شبه‌عنصرها (::before، ::after). انتخاب‌گرهای مرکبِ پیچیده و فهرست‌های انتخاب‌گر (جداشده با ویرگول) به‌طور کامل پشتیبانی می‌شوند.

دام‌های رایج و حالت‌های لبه‌ای

تطبیق انتخاب‌گر CSS به ساختار DOM تجزیه‌شده وابسته است، نه متن خام HTML — تگ‌های بسته‌نشده، عناصر ضمنی (tbody) و اصلاح خطای مرورگر می‌توانند باعث شوند DOM واقعی با چیزی که در سورس می‌بینید متفاوت باشد. شبه‌عنصرها (::before، ::after) گره‌های واقعی DOM نیستند و با querySelector قابل انتخاب نیستند. پیشوندهای namespace در محتوای XML/SVG به رسیدگی ویژه نیاز دارند. انتخاب‌گرهای بیش‌ازحد اختصاصی که روی HTML نمونه کار می‌کنند ممکن است روی صفحات تولید با نشانه‌گذاری کمی متفاوت از کار بیفتند.

چه زمانی از این ابزار استفاده کنیم در برابر کُد

از این ابزار مرورگری برای توسعهٔ تعاملی انتخاب‌گر و اعتبارسنجی سریع در برابر قطعه‌های HTML استفاده کنید. برای اسکرپینگ وب در محیط تولید یا اتوماسیون تست، از آزمون انتخاب‌گر داخلی فریم‌ورک خود (Playwright's page.locator، Puppeteer's page.$) استفاده کنید که روی DOM رندرشدهٔ واقعی با اجرای JavaScript، محتوای پویا، پیمایش shadow DOM و رسیدگی به iframe اجرا می‌شود؛ چیزهایی که تطبیق HTML ایستا نمی‌تواند بازتولید کند.