Comment on page
Copying CSS and HTML
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:

Pseudo-classes such as
:hover
, :active
, :focus
, etc, and pseudo-elements such as: :before
, :after
, etc., are copied along with all media queries automatically.
It's also possible to copy HTML code along with the CSS:

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.

- 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