Does someone know how to use the CSS selector :not()
as #some_id:not(.any_class_name)
?
The code looks as if it is right, but it doesn't work. Is there another way without the not
selector? I couldn't find anything on the Internet.
I am making a web application, which includes more than one page, but several pages have divs with id=some_id
. I thought I had to add specific CSS by adding any_class_name
one time using the above CSS code solve the problem, but it doesn't work.
Yes you can. You just need to understand what they are for, the class is more general and can be used several times, the id (is like your id's) you can use it only once.
The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, ...
It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.
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.
I believe that you are reversing the selectors. You have some elements with the same class
, but you want to filter out an element with an specific ID
. In that case:
HTML:
<p class="someclass">hello</p> <!-- will be targeted by css below, thus green --> <p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->
CSS:
.someclass:not(#some-id){ color: green; } /* selects all elements with classname 'someclass', but excludes the one that has also has an id of 'some-id' */
And as @secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.
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