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.