How to Exclude a Tag from CSS Class

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>

is there a way to exclude a tag from css class

CSS cascades, meaning you can overwrite the values of previously defined properties.

You would do:

.statisticsTable tr.even, .statisticsTable tr.odd {
    font-weight: normal;
    font-size: DEFAULT; /* what ever your default is */
    font-family: DEFAULT; /* what ever your default is */
    /* I would use the font shorthand property */
    color: DEFAULT;
    background: DEFAULT;
}

If you want to use CSS3, you can use :not to only apply the following styles to TR elements which don't have the even or odd class:

.statisticsTable tr:not(.even):not(.odd) {
    font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva;
    color: #fff;
    background:#990000;
}

EDIT: not(.even,.odd) is not valid syntax thus will not work (at least not in Chrome)
correct syntax is :not(selector) , however you can do :not(selector1):not(selector2) these not()s are on the same level.

Exclude Element From CSS Class In Div

    div.dummy  :not(a):not(img) {      background: black;      color: white;      font - size: 20 px;      width:100%;      height:50px;      position:relative;    }

    <div class="container-fluid dummy bg-2 text-center">      <h3>LinkedIn</h3>      <a target="_blank" href={ "https://www.linkedin.com"}>        <img src={linkedin} class={ "linkedin"}/>        </a>      <p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!      </p>    </div>
   

CSS exclude a tag from * selector

Put a negation for the classes that you don't want to apply the style:

For example:

*:not(.fa) {
    font-family: Roboto !important;
}

Usually the icons are in "i" elements, you could do the following as well to affect any icons:

*:not(i) {
    font-family: Roboto !important;
}

But using "i" elements is not mandatory, and there could be icons that are not as "i" tags, as well as normal text as "i" tags (although this is very unusual)

Also, take into account that using "!important" is not a good practice, especially with a rule so generic.

Exclude tag from style if with tag falls below other tag/class name

Try like this:

.price > .amount > bdi,
.price > ins > .amount > bdi {
        color:red;
    }

<div>
    
    <div class="scenario1">
        <p class="price">
            <span class="amount">
                <bdi>1300</bdi>
            </span>
        </p>    
    </div>    

    <div class="scenario2">
        <p class="price">
            <del>
                <span class="amount">
                    <bdi>1500</bdi>
                </span>
            </del>
            <ins>
                <span class="amount">
                    <bdi>1400</bdi>
                </span>
            </ins>
        </p>    
    </div>    

<div>

How to exclude particular class name in CSS selector?

One way is to use the multiple class selector (no space as that is the descendant selector):

.reMode_hover:not(.reMode_selected):hover {   background-color: #f0ac00;}

<a href="" title="Design" class="reMode_design  reMode_hover">    <span>Design</span></a>
<a href="" title="Design"  class="reMode_design  reMode_hover reMode_selected">    <span>Design</span></a>

CSS * selector but exclude a particular tag

You could use the CSS :not selector, and apply a style to all descendants of .x-webkit except the tag(s) you want to exclude:

.x-webkit *:not(p):not(em) {  color: red;}

<div class="x-webkit">  <div>red</div>  <ul><li>red</li></ul>  <p>    Not red<br>    <strong>red</strong><br>    <em>Not red</em>  </p>  <table><tr><td>red</td></tr></table></div>

---

Related Topics