Comment on page

Copying CSS and HTML

Copying child elements' CSS:
With CSS Pro, you can copy the CSS of the selected element and all its child elements. This can be turned on and off anytime at More > Settings > Child elements' CSS:
​
Copying pseudo-classes pseudo-elements and media queries styles:
Pseudo-classes such as :hover, :active, :focus, etc, and pseudo-elements such as: :before, :after, etc., are copied along with all media queries automatically.
​
HTML Code:
It's also possible to copy HTML code along with the CSS:
Copying preferences for CSS selectors
Copy original selectors: CSS Pro will try its best to copy the selectors in their original form (removing invalid parts of it when necessary).
Smartly generate selectors: CSS Pro will generate a unique selector for every CSS. This generates a bigger output, but it's specific and won't cause conflict with your current CSS.
Other copying preferences:
Convert font-size measurement units to px
If the CSS property font-size is declared on the element, will always be rendered in pixels.
Ignore box-sizing
Ignores the CSS property box-sizing (don't show it when inspecting elements, even if it's declared)
Ignore browser vendor prefixes
Ignores browser vendor prefixes such as (-webkit-, -moz-, -ms-, etc) (don't show it when inspecting elements, even if it's declared)
Ignore inherited properties
Ignores inherited CSS properties (such as font-family, font-size, color, etc)
Convert relative URLs to absolute
Converts all relative URLs to absolute in the CSS.
Example: "background: url(../assets/img.jpg)" turns into "background: url(https://yourwebsite.com/assets/img.jpg)"
Nest pseudo-classes, pseudo-elements, and media queries (for SASS/LESS)
If you use CSS pre-processors like SASS and LESS, this can copy the code with the pseudo-classes, pseudo-elements, and media queries as "nested".
Don't copy CSS selectors when possible
If the copied code is simple (without child elements and without HTML code), it won't copy the CSS selectors.
​

Last modified 1mo ago