how to use span:not() to avoid span with certain

Question

I would like to apply the following stying to all my span tags, except for those containing the text 'dontwant'

 span:not("dontwant"){
    font-weight: inherit;
    filter: drop-shadow(0px 0px 0rem black);
    box-shadow: 0px 0px 0px black
  }

here is the span I would like to avoid: dontwant

UPDATE posted in a comment: What about using jquery to hide that element with that text? Is that possible?

That’s not possible, because [there’s no CSS selector for matching text](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text). You need to identify them with something selectable, like a class. — Ry-, Aug 18 '20 at 18:55
Do you mean containing a *class* "dontwant" or the actual text? you cannot select text using CSS, if that's what you were trying to do. — FluffyKitten, Aug 18 '20 at 18:55
@user998548 You asked if jQuery could be used in a comment on another answer - l've edited the question to add the `jquery` tag and a included a jQuery solution in my answer that can also be used in angular - let us know if that works or if you need more help! — FluffyKitten, Aug 21 '20 at 10:17

FluffyKitten · Answer 1 · 2020-08-21T10:21:33.487

As we mentioned, CSS doesn’t have a selector that lets you match text. You could do it in CSS by adding classes to all of the elements that contain the text you don’t want to style, but that requires the HTML to be changed.

You ask in a comment if this could be done using jQuery - it can, using a combination of the contains and not selectors.

Using jQuery also means you don’t don’t have to change the existing HTML.

The easiest way is to first create a CSS class with the styles to apply, e.g.

.shadow {
    font-weight: inherit;
    filter: drop-shadow (0px 0px 0rem black);
    box-shadow: 0px 0px 0px black
}

Now you can use JQuery to select all spans that do not contain “dontwant” and add your class to them, like this:

$('span:not(:contains("dontwant"))').addClass('shadow');

You just add this line to your $(document).ready(function()

Working Snippet:

    $('span:not(:contains("dontwant"))').addClass('shadow');

.shadow {
    font-weight: inherit;
    filter: drop-shadow(0px 0px 0rem black);
    box-shadow: 0px 0px 0px black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>This is a span I <span>dontwant</span> to add <span>shadow</span>.</p>
<p>This is <span>another</span> span I <span>dontwant</span> to add <span>shadow</span>.</p>

You can include this in Angular in the ngOnInit function, e.g.:

public ngOnInit(){
   $(document).ready(function(){
      $('span:not(:contains("dontwant"))').addClass('shadow');
   });
}

how to use span:not() to avoid span with certain

1 Answers1