CSS Scan Pro
Search…
CSS Scan Pro
Initial page
Quick Start
Intalling it
Inspecting
Choosing what happens when you click on an element
Inspecting overlapping and parent elements
Comparing multiple elements at the same time (Pinning)
Measuring distances and checking alignments
Inspecting animations
Identifying fonts
Editing
Code Editor
Visual Editor
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
Copying CSS and HTML

Copying Element's children CSS:

With CSS Scan Pro, you can copy not only the CSS of the selected element but of all its children as well. This can be turned on and off anytime at Settings > Element's children CSS:
​

Copying pseudo-classes and pseudo-elements styles:

Pseudo-classes such as :hover, :active, :focus, etc and pseudo-elements such as: :before, :after, etc, can be copied.
You can also copy it as nested styles if you're using CSS pre-processors like SASS or LESS.
​

HTML Code:

It's also possible to copy HTML code along with the CSS:
​

Other options:

  • Generate unique CSS selector
    • Generates a unique and specific CSS selector for every element you hover over (same as clicking on Copy unique selector on Selector mode).
    • Example: div#rso > div:nth-child(1) > div > div > div > div:nth-child(1) > a > h3 > span
  • Copy CSS selector
    • If you want to copy the CSS selector (or classes names, ids, etc) along with the CSS.
    • This could be either a general or a unique selector (depends if Generate unique CSS selector is enabled)
    • Example with: "div.class { color: black; }"
    • Example without: "color: black;"
  • 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)"
​
Editing - Previous
Removing elements
Next - Copying
Exporting elements
Last modified 1yr ago
Copy link
On this page
Copying Element's children CSS:
Copying pseudo-classes and pseudo-elements styles:
HTML Code:
Other options: