Using regular expression with not function in css

Question

There is a way to use regular expresssion in css not function like this:

*:not(.^col-) {
    max-width: 100%;
}

i mean apply to elements except those has a class begining with "col-". so how can i do this with css?

Note: the class attribute may content other class like <a class="a-class b-class col-12">.

D. Pardal · Accepted Answer · 2021-03-02T12:00:49.557

There is no way to use regular expressions with CSS. However, there are ways to select elements which attributes start/end/contain certain strings.

In this case, I believe you're trying to select all elements for which their class doesn't start with col-. You can use this:

*:not([class ^= "col-"]) {
    max-width: 100%;
}

Note that [class ^= "col-"] will only match if the class attribute starts with col-, so <element class="col-123 abc"> will match but <element class="abc col-123"> will not.

Because of that, it's recommended to have a separate class which is the same for all elements. You can do it with JavaScript:

// Note: This code isn't very efficient. Add the class manually whenever possible.
const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
  acceptNode(elem) {
    if ([...elem.classList].some(c => c.startsWith("col-")))
      return NodeFilter.FILTER_ACCEPT;
    else
      return NodeFilter.FILTER_SKIP;
  }
});
while (tw.nextNode()) {
  tw.currentNode.classList.add("col");
}

.col {
  color: red;
}

<div class="abc col-12">Test div</div>
<div class="abc">Another test div</div>

Thank you. is it possible to add for exemple a "col" class to all elements that have a class containing "col-" using javascript? — houssein ahmed, Mar 02 '21 at 11:27

score 0 · Answer 2 · edited Mar 02 '21 at 11:07

0

First, add the class .col to things that you don't want to change then go to CSS and change your code.

 *:not(.col) {
        width: 100%;
    }

<div class="col" style="background-color: red;">This is example</div>

edited Mar 02 '21 at 11:07

D. Pardal

6,173
1
17
37

answered Mar 02 '21 at 11:04

Kbs2021

138
11

Why you edited my answer?? – Kbs2021 Mar 02 '21 at 11:09
To improve it, of course. There is no need to say it's working, we can see that in the snippet. Don't worry; editing answers is a common procedure here on Stack Overflow. – D. Pardal Mar 02 '21 at 11:13
I am a beginner and want to earn more reputation, my answer went down and you came first that's why I got scared and asked. Sorry :( – Kbs2021 Mar 02 '21 at 11:15
Thank you. is it possible to add for exemple a "col" class to all elements that have a class containing "col-" using javascript? – houssein ahmed Mar 02 '21 at 11:29
I don't think so – Kbs2021 Mar 02 '21 at 11:30

Using regular expression with not function in css

2 Answers2