CODEWITHSUNDEEP
htmlcsscss-selectors
John John
John John

Reputation: 1

how to select a Div ID that does not have a specifc class/es

I am working on a web application, and i have a div with ID = WebPartWPQ2 .I define the following css rule to define its min-width:-

#WebPartWPQ2  {
    min-width:1280px;
}

currently this will apply to all the Divs that have this ID. but currently i have the following div :-

<div id="WebPartWPQ2" class="ms-wpContentDivSpace " style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">

which have the associated ID and a class named "ms-wpcontentDivSpace" , so how i can exclude this Dic that have this class from my above css rule ?

Upvotes: 2

Views: 418

Answers (4)

paceaux
paceaux

Reputation: 1890

the :not() selector would be useful, as others have already mentioned. It has good support in modern browsers, but not IE8.

If you needed an IE8-friendly solution,first declare the rule that is true most of the time: 

#WebPartWPQ2  {
    min-width:1280px;
}

Then declare a rule that overrides the first with a higher specificity:

#WebPartWPQ2.ms-wpContentDivSpace {
    min-width: initial;
}

Upvotes: 0

Carson Crane
Carson Crane

Reputation: 1207

#WebPartWPQ2.ms-wpContentDivSpace {
    min-width: 0; /*fallback*/
    min-width: initial;
}

You could also change your declaration to this:

#WebPartWPQ2:not(.ms-wpContentDivSpace) {
    min-width:1280px;
}

I personally think the first one is easier to read.

Upvotes: 4

Lajos Arpad
Lajos Arpad

Reputation: 76426

ID stands for identifier, which means that it must be unique. Use class instead of id, if you intend to use the same rule at more tags at the same page and do not duplicate ids.

.WebPartWPQ2:not(.exception)  {
    min-width:1280px;
}

<div class="ms-wpContentDivSpace WebPartWPQ2 exception" style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">

Upvotes: 0

Little Santi
Little Santi

Reputation: 8783

In the first place, it is not right to have several elements in the same document sharing the same ID. If you decide to give an ID to an element, it must be unique.

If you want to differenciate groups of elements, classes are intended for that.

Upvotes: 0

Related Questions