Apply CSS Style on all elements except with a SPECIFIC ID
HtmlCssHtml Problem Overview
CSS Code(what I need)
<style>
div[id!='div1']// I actually needed an inequality operator for NOT EQUAL TO
{
font-size:40px;
}
</style>
HTML code
<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?
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
CSS3 solution:
div:not(#div1)
CSS2 solution:
div {
color: red;
}
div#div1 {
color: inherit;
}
By name:
CSS3 solution:
div:not([name=div1]) {
color: red;
}
CSS2 Solution (note not supported in IE6 - but who cares anymore):
div {
color: red;
}
div[name=div1] {
color: inherit;
}
Solution 3 - Html
If you are only to target browsers supporting CSS3 selectors you could do this:
div:not(#div1) {
...my styles...
}