Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

Question

I have an application where styles are defined as

select { 
    border: 1px solid #6FA7D1; 
    outline:0; 
    height:25px; 
    padding-left: 5px; 
    font-family:Arial; 
    font-size:12px; 
    transition: all 0.8s; 
    border-bottom-left-radius: 5px; 
    border-top-left-radius: 5px; 
    }

so, every <select></select> will get the same style, which is expected, but, I'm using some third party plugins like jqGrid and I don't want to apply same style on for instance <select> rendered in jqGrid pager. This <select> has some class. Is there some way to tell in CSS not to apply on DOM with certain class?

Please don't focus strictly on this <select> in jqGrid, I have more situations when I can use such exclusion.

Use select:not(.someclass):not(.anotherclass) { } /* someclass and anotherclass should be assigned to select element */ — Shyam
– Shyam, Commented Jan 2, 2015 at 12:20

SW4 · Accepted Answer · 2015-01-02 12:12:32Z

5

You can use the :not selector to prevent application under certain circumstances, e.g:

:not(selector) select

Where selector relates to either a jQGrid id or class

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.

This basically says target select elements which arent a child of selector (in this case jQGrid)

You can use :not to exclude any subset of matched elements.

:not(div) > span {
  color: red;
}

<span>Make me red!</span>
<div><span>...but not me...</span>
</div>

answered Jan 2, 2015 at 12:12

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eozzy · Accepted Answer · 2015-01-02 12:11:57Z

4

http://jsfiddle.net/iaezzy/1s5g5mjn/

.element:not(.exclude) {
    background: green;
}
.exclude {
    background:red;
}

answered Jan 2, 2015 at 12:11

eozzy

69.3k111 gold badges287 silver badges448 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:17:20Z

2

What about Can I write a CSS selector selecting elements NOT having a certain class? in CSS3?

select:not(.someClass) {
    /* Styles */
}

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 2, 2015 at 12:12

Yann Bertrand

3,1141 gold badge25 silver badges40 bronze badges

Comments

ckuijjer · Accepted Answer · 2015-01-02 12:12:12Z

0

You can't, the only option would be to:

Put the <select> styling into a class, e.g. .select, and add that <select class="select"> to all elements that you want to be styled.
Add a class, e.g. select-jqGrid, that overrides all default styling from the select and add that to all <select> elements inside the jqGrid.

answered Jan 2, 2015 at 12:12

ckuijjer

13.9k4 gold badges43 silver badges46 bronze badges

Collectives™ on Stack Overflow

Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related