-1

I have a simple example explaining the not selector in CSS. I am expecting every element to have the border red. But none is having. Where is the problem? 

[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/

This selector exists in jQuery. I hoped same for CSS also. Isn't it?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Deadpool
  • 7,811
  • 9
  • 44
  • 88

2 Answers2

0

Have you tried using the :not selector?

:not([name='er']) { 
  border: 2px solid red;
}
c0deNinja
  • 3,956
  • 1
  • 29
  • 45
pzworks
  • 165
  • 2
  • 8
-1

This is how your selector should be.

:not([name='er'])

You need to know about :not operator.

*: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>
Sankar
  • 6,908
  • 2
  • 30
  • 53
  • 1
    "You need to know about :not operator." You probably need to brush up too. Those two * shouldn't be there. The whitespace between the first * and :not() is significant. The second * works in certain browsers, sure, but there is no reason whatsoever to have it inside a :not(), and furthermore, compound selectors in :not() doesn't work in all browsers. – BoltClock Feb 22 '17 at 08:26
  • @BoltClock thanks. i just updated two things that you said. And also i hope all modern browsers will support `:not` operator. – Sankar Feb 22 '17 at 09:04