How can I find the CSS class of an element?

Overview

CodingBunny CSS Inspector adds a sidebar, inspired by browser DevTools, directly to the WordPress frontend. It allows administrators to visually inspect any element on the page, easily view, copy, and reuse CSS, selectors, variables, and pseudo-states (:hover, :focus, :active), without needing to access external tools.The plugin is designed to make theme customization, debugging, and quick style adjustments faster and more accessible—all with a modern UI visible only to authenticated administrators.

Key Features

Sidebar

In the WordPress frontend, access a sidebar from the admin bar that allows you to visually inspect elements. All without having to open your browser’s DevTools.

View Full CSS Blocks

Seleziona qualunque elemento e vedi immediatamente tutte le regole CSS applicate:

  • Selettori completi e semplificati
  • Blocchi CSS facilmente leggibili

Quick Copy of Selectors and Pseudo-State

Copy the CSS portion you are interested in with a single click, including states such as :hover, :focus, and :active, ready to be pasted into your child theme or plugin.

Automatic Extraction of CSS Variables

The plugin displays all CSS variables (--variable) used in the selected element, facilitating the reuse of colors, spacing, etc. defined by the theme.

Copy Buttons with Visual Feedback

Each section includes buttons for copying with visual confirmation to ensure that the command was successful.

Lightweight and Secure

The tool only works for authenticated administrators and is completely transparent to visitors: zero impact on performance, no interference with the live site.

Server Configuration

The plugin does not require any special server-side configuration. However, it is important to remember that, in order to function securely and without display errors:

  • The plugin is activated only for authenticated administrator users
  • It is never loaded for public visitors or in the WordPress dashboard
  • It does not permanently modify the styles of the theme or plugins (copied CSS must be manually inserted where desired)

Common Troubleshooting

If you encounter problems displaying styles or loading, check:

  • That your theme does not have JavaScript conflicts that prevent the sidebar from opening
  • That you are logged in as an administrator
  • That no security plugins are installed that hide the WordPress admin bar