<style> div[id!='div1']// I actually needed an inequality operator for NOT EQUAL TO { font-size:40px; } </style>
<body> <div>abc</div> <div>def</div> <div id='div1'>ghi</div> </body>
The CSS didn't work as I intended.
I actually wanted to define the style for all <div>
-elements except the one with id='div1'
.
How can I do that?
Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.
The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.
Use the :not selector:
div:not(#bar){ color:red; }
<div>foo</div> <div id="bar">bar</div>
Update : name
instead of ID
:
div:not([name="bar"]){ color:red; }
<div>foo</div> <div name="bar">bar</div>
Update: CSS2 selector, similar answer to Tom Heard-s:
div{ color:red; } div[name="bar"]{ color:blue; }
<div>foo</div> <div name="bar">bar</div>
Also, see selectivizr
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With