How to Exclude a Specific Element from Inheriting CSS Rules

How can I exclude a specific element from inheriting CSS rules?

You can apply your own class or inline style to the link in question.

for example:

<a href="#" class="MyNewClass" />

or

<a href="#" style="color:red;" />

CSS inherit keyword Exclude selected elements from a rule

Let's take it step by step in this snippet:

/* Make second-level headers green */

h2 {
  color: green;
}

/* ...but leave those in the sidebar alone so they use their parent's color */

#sidebar h2 {
  color: inherit;
}

div#current {
  color: blue;
}

<h2>this is an h2 outside the sidebar so it should have the color set for h2 in the style sheet which is green.</h2>
<div id="sidebar">
  <h2>This is an h2 inside the sidebar so it has inherited its parent's color - which in this example is the default which is black</h2>
  <div id="current">
    <h2>This is an h2 inside a div. The div has id current and color blue. This h2 has inherited its parent's color which is blue.</div>
</div>

CSS - Exclude a child from inheriting parent style

Put class names on your IMG tags and target those directly.

.logo img.thisStyle {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

How to stop a CSS rule from applying to a specific element

Thank you everyone for the suggestions, but the following answer worked perfectly for me:

a.none {
  line-height: inherit;
  display: inherit;
  text-decoration: inherit;
  font-size: inherit;
  color: inherit;
}

Create that class and then attach it to the a tag like this:

<a class="none" href="/test">test</a>

Someone posted this before and then deleted it, i don't know why, but thank you!

Exclude a class from all of the selectors in CSS

It is possible with CSS4 :is selector. You can watch out for the browser support here: https://caniuse.com/?search=is but in modern web developer terms, you are safe to use it.

:is(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}

<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>

---

Related Topics