Comment on page

Choosing what happens when you click on an element

CSS Pro has 3 "on click" modes regarding what happens when you click on an element: Select element, Copy code, and Pin the CSS window.

1. Default mode: Select element
This mode shows you options of what you can do with an element. When you click on an element, it shows a tooltip with 5 different options and keeps the red guidelines in place:
The options are, in order:
Copy to clipboard
With the options:
Copy code
The final result depends on your Settings. But by default, it copies the HTML and CSS code of the element, all its children, and pseudo-classes and pseudo-elements)
Copy selector
Copy a general and non-specific CSS selector for the current element.
Example: "p" or "p.some-class"
Copy unique selector
Copy a specific and unique CSS selector that only matches this element on the page.
Example: "div#rso > div:nth-child(1) > div > div > div > div:nth-child(1) > a > h3 > span"
Copy HTML code
Copy the element's HTML code
​
Edit or inspect elements' CSS
If you want to see or edit the element's CSS code. This option will pin the CSS window on the screen:
​
Export element
With the options:
Export element to Codepen (export the HTML and CSS of the element, all its children, and pseudo-classes and pseudo-elements)
Save element as a file (same as exporting the element to Codepen, but instead of sending it to Codepen, it's exported as a .html file)
​
Remove element
Completely remove the element from the DOM (locally and until you refresh the page again).
Cancel
Sometimes, you click on an element by accident. This option lets you cancel the selection.
​
2. Copy code
If your goal is to copy things quickly, this is going to save you time. It's simple: click to copy. The result is the same as selecting "Copy code" on the "Select element" mode.
​
3. Pin the CSS window
If this mode is selected, whenever you click on an element, it will pin the CSS window on the screen so you can edit it. Pinning can also be done by pressing the space bar key shortcut in any mode (the page has to be focused for the shortcut to work).
​
​
Changing "on click" modes
To change modes, click on the three dots icon (More) on CSS Pro's menu, then go to Settings, and then find the section "On click," and choose one of the 3 options by clicking on it.
​
​