.msg.show{display:block}

WHAT IT DOES

This userscript adds a floating Selector Specificity Inspector panel to any webpage that detects and lists all CSS selectors used across the page's stylesheets, showing each selector's computed specificity in the standard (a,b,c) format. For each selector, the panel displays the selector text, its specificity value (IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements), and the number of elements it matches on the page. A search filter allows you to find specific selectors or specificity values (e.g., searching "1,0,0" finds all selectors with that specificity). You can copy any selector to the clipboard with a single click. The "Highlight" button on each selector highlights all matching elements on the page, scrolling to the first match. A custom "Test Specificity" input lets you enter any selector and immediately see its calculated specificity and matching elements highlighted in real time. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with specificity debugging and selector analysis.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Selector List" section displays all selectors found on the page, sorted alphabetically. Each entry shows the selector text, its specificity in parentheses, and the number of matching elements. Use the search input to filter selectors by text or specificity value. Click the "Copy" button on any selector to copy it to your clipboard. Click the "Highlight" button to highlight all matching elements on the page—the first match will scroll into view with a blue outline. Use the custom "Test Specificity" input to enter any selector and click "Test" to see its specificity and matching elements highlighted. Click "Clear Highlights" to remove all highlighting.

SPECIFICITY CALCULATION WITH STANDARD ALGORITHM AND ELEMENT MATCHING

The script iterates through all stylesheets on the page using document.styleSheets, reading each CSSRule of type 1 (style rules). It extracts every unique selector, splitting comma-separated groups into individual selectors. For each selector, the script calculates specificity using the standard CSS algorithm: count the number of ID selectors (a), count the number of class selectors, attribute selectors, and pseudo-classes (b), and count the number of element selectors and pseudo-elements (c). The result is formatted as (a,b,c). The script then counts matching elements using document.querySelectorAll() with error handling. The custom test input allows testing arbitrary selectors with immediate visual feedback. This approach provides a comprehensive view of specificity across the page, making it easy to identify over- or under-specific selectors and debug cascade conflicts.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The selector list has a maximum height of 280px with internal scrolling. The custom test input provides a dedicated field for live specificity testing.

PLEASE NOTE

Requires the free BotGentz extension to run. The script detects selectors from stylesheets only—dynamically injected styles may not be detected until the "Refresh" button is clicked. Cross-origin stylesheets may not be accessible due to browser security restrictions. The script does not collect, store, or transmit any personal data. All selector data is read from the page and displayed locally. Specificity is calculated using the standard CSS algorithm and may not account for !important or inline styles. The highlight feature uses a blue outline that may overlap with existing element styles. The custom test input uses querySelectorAll which may not support all CSS selectors; invalid selectors will show an error message. The search filter matches against both selector text and specificity string (e.g., "1,0,0").