CSS Pro
  • Initial page
  • Quick Start
    • Installing it
      • On Google Chrome
      • On Firefox
      • On Safari
  • Inspecting
    • Choosing what happens when you click on an element
    • Inspecting invisible, overlapping, and parent elements
    • Comparing multiple elements at the same time (Pinning)
    • Measuring distances and checking alignments
    • Inspecting animations
    • Identifying fonts
  • Editing
    • Code Editor (Code tab)
      • Forcing a state or pseudo
    • Visual Editor (Design tab)
      • Editing media queries and pseudo states
      • Editing backgrounds
      • Auto unit conversion
    • HTML Editor (HTML tab)
    • Handling CSS changes
    • Editing texts
    • Removing elements
  • Copying
    • Copying CSS and HTML
    • Exporting elements
    • Downloading page assets (images)
    • Copying colors
  • License
    • Managing your license activations
    • Retrieving your license key (forgot)
  • Subscription
    • Switching from the monthly to the annual plan
    • Canceling your subscription
Powered by GitBook
On this page
  • Copying child elements' CSS:
  • Copying pseudo-classes pseudo-elements and media queries styles:
  • Copying CSS variables:
  • HTML Code:
  • Copying preferences for CSS selectors
  • Other copying preferences:

Was this helpful?

  1. Copying

Copying CSS and HTML

PreviousRemoving elementsNextExporting elements

Last updated 5 months ago

Was this helpful?

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)