painty / CSS-Used-ChromeExt

Get all css rules used by the selected DOM and its children.
https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff
MIT License
269 stars 64 forks source link

FAQ: get the css from parent defined #56

Open rowthan opened 1 year ago

rowthan commented 1 year ago

about FAQ 2. css will be ignored when defined with parent selector. like

<div id="parent"><div class="child"></div></div>

#parent .child{
   background: red;
}

if we choose the child element as $0 , the result is empty.

i have a method to solve this problem:

firstly, checking whether the last selector is matched. matched in this case .child

$0.matched('.child') // true

secondly, checking the parent selector is the parent of the target:

const parentSelector = '#parent';
const parentElement = document.querySelector(parentSelector);
const isMatched = parentElement.contain($0); 

we can add a root node as the wrapper of $0

<div id="the-root-for-wrapper-result"><div class="child"></div></div>
#the-root-for-wrapper-result  .child{
   background: red;
}
rowthan commented 1 year ago

check is it work please? i would like make pull request if you accept this idea.