Home > other >  Is it possible to group selector with :not() negation pseudo-class?
Is it possible to group selector with :not() negation pseudo-class?

Time:02-03

Is it possible to group selectors (e.g. p, li) with :not() negation pseudo-class? (Something like this, just to give an idea):

p, li a:not(.tags, .promo):link{ 
    border-bottom: 1px solid; 
    padding: 0 0 0.06rem 0
   }
p, li a:not(.tags, .promo):visited,
p, li a:not(.tags, .promo):hover,
p,li a:not(.tags, .promo):active { 
    border-bottom: 1px solid #ccc
   }

Please note: not multiple arguments, but group the p and li.

CodePudding user response:

It's not possible to combine multiple HTML tags with a pseudo-class like not() with pure CSS.

Note: I say pure, since using a CSS pre-processor like Sass, this would be possible


The only way of achieving the same, with fewer lines of CSS is to apply a class to the elements you wish to include

So instead of

p  a:not(.something),
li a:not(.something) {
    color: red;
}

Use a class:

.target:not(.something) {
    color: red;
}
<p class='target'>
    <a>Link</a>
</p>

<ol class='target'>
    <li>
        <a>Link</a>
    </li>
</ol>

  • Related