Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply CSS Style on all elements except with a SPECIFIC ID

Tags:

html

css

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?

like image 956
Rajesh Paul Avatar asked Oct 19 '13 09:10

Rajesh Paul


People also ask

How do I apply CSS to all elements except one?

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.

How do I style a specific ID in CSS?

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

How do you exclude an element from a style in CSS?

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.

How do I style a specific ID in HTML?

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 {}.


1 Answers

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

like image 164
Vucko Avatar answered Sep 26 '22 23:09

Vucko