CODEWITHSUNDEEP
cssgoogle-chrome-devtools
Ryan
Ryan

Reputation: 6055

How to uncheck style rule for single element in chrome DevTools?

I have a CSS rule like this:

.blah-blah div

That rule hits many divs on the page. When I uncheck that rule for any element in Chrome DevTools I think it "disables" the rule for all elements that it applies to. Is there any way to only uncheck that rule for the current element in question?

Upvotes: 0

Views: 658

Answers (1)

Kayce Basques
Kayce Basques

Reputation: 25907

DevTools technical writer here. You're right. When you uncheck a general rule like this:

p {
  margin-bottom: 1em;
}

It'll disable the rule for all p nodes.

One workaround is to select the element in the DOM Tree and then declare a new rule in the element.style block that cancels out whatever styling you're trying to suppress.

element.style

The element.style block is equivalent to adding inline styles to the element's HTML via the style attribute. The code in the screenshot above maps to this:

<p style="margin-top: 48px; background-color: beige;">...</p>

Upvotes: 1

Related Questions