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:

CSS Pro automatically copies all pseudo-classes such as :hover, :active, :focus, etc, and pseudo-elements such as: :before, :after, etc, along with all media queries automatically.

Copying CSS variables:

CSS Pro automatically copies all CSS variables.

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.

• Copy fonts

  • Copies the website's custom fonts imports (@font-face declarations with their URLs)