<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