Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS use :not ID with CLASS

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.

like image 406
Ulug'bek Avatar asked Dec 02 '13 12:12

Ulug'bek


People also ask

Can we use ID and class together in CSS?

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.

Should I use class or ID in CSS?

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, ...

Why you should not use ID in CSS?

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.

How do I exclude a class 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.


1 Answers

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.

like image 150
Justus Romijn Avatar answered Oct 24 '22 18:10

Justus Romijn