0

I wish to extract the entire CSS affecting a div that is highlighted. With complex designs the CSS is made up of many classes which add in some CSS. Looking for a technique that can strip out and perhaps concatenate all these together, like Inspect Element but cleaner.

For example, on this Adobe Experience Page(http://www.adobe.com/uk/products/experience-design.html). I wish to select the article div "A new experience in user experience." and then pull out all the CSS affecting everything inside it attached to a class.

There is an ExtractCSS tool that does something similar, but looking for something a bit more intuitive. That ignores all the strikethroughs too.

enter image description here

me9867
  • 1,519
  • 4
  • 25
  • 53
  • Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, tutorial, explain a technique or provide any other off-site resource are off-topic for Stack Overflow Stack Overflow – Paulie_D Sep 16 '16 at 10:33
  • Possible duplicate of [Find all CSS rules that apply to an element](http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element) –  Sep 16 '16 at 13:06

1 Answers1

1

The simplest way is:

  • Select your element in the developer tools
  • Run window.getComputedStyle($0).cssText on the Js console

where $0 represents the currently selected DOM element.

In alternative, if you want to target a specific element with a given class, then do
window.getComputedStyle( document.getElementsByClassName('hero2-align-2 hero2-basis-0')[0] ).cssText
Querying elements by class name might return more than 1 element, the [0] is there to guarantee only one is processed.

Or by id
window.getComputedStyle( document.getElementById('yourID') ).cssText

Jose Rui Santos
  • 15,009
  • 9
  • 58
  • 71
  • Clicked on Inspect, then highlighted the article, then clicked on Console and tried "window.getComputedStyle(hero2-align-2 hero2-basis-0).cssText" which returns "Uncaught SyntaxError: missing ) after argument list" – me9867 Sep 16 '16 at 10:47
  • @merch89 Please type `$0` instead of the class. You should type `window.getComputedStyle($0).cssText`. – Jose Rui Santos Sep 16 '16 at 12:17
  • @merch89 To understand what that dollar zero means, just type `$0` on the console, select another element, type again, select another element, type again... – Jose Rui Santos Sep 16 '16 at 12:19
  • That will give the values of the properties, but he wants the RULES which are being applied. –  Sep 16 '16 at 13:06