Простой не селектор не работает в CSS

Question

У меня есть простой пример, объясняющий неселектор в CSS. Я ожидаю, что каждый элемент будет красным. Но никто не имеет. В чем проблема?

[name!='er']{border:2px solid red;}

<p name='peter'>This is paragraph 1.</p> 
 

 
<p name='julie'>This is paragraph 2.</p> 
 

 
<p name='jennifer'>This is paragraph 3.</p> 
 

 
<p name='george'>This is paragraph 4.</p> 
 

 
<p name='gilbert'>This is paragraph 6.</p> 
 

 
<span name='rosy'>This is span 1.</span> 
 

 
<span name='robert'>This is span 2.</span>

https://api.jquery.com/attribute-not-equal-selector/

Этот селектор существует в JQuery. Я тоже надеялся на CSS. Не так ли?

Answer 1

Вот как должен быть ваш селектор.

:not([name='er'])

Вы должны знать о :not оператора.

*:not([name='er']) { 
 
    border: 2px solid red; 
 
}

<p name='peter'>This is paragraph 1.</p> 
 

 
<p name='julie'>This is paragraph 2.</p> 
 

 
<p name='jennifer'>This is paragraph 3.</p> 
 

 
<p name='george'>This is paragraph 4.</p> 
 

 
<p name='gilbert'>This is paragraph 6.</p> 
 

 
<span name='rosy'>This is span 1.</span> 
 

 
<span name='robert'>This is span 2.</span>

Answer 2

Вы пробовали использовать селектор :not?

:not([name='er']) { 
    border: 2px solid red; 
}