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:
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.
It's also possible to copy HTML code along with the CSS:
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)
"