Ufdjrw

Checking @@ROWCOUNT failing

Writing in a Christian voice

Air travel with refrigerated insulin

When is the exact date for EOL of Ubuntu 14.04 LTS?

Error in master's thesis, I do not know what to do

Capacitor electron flow

How to preserve electronics (computers, ipads, phones) for hundreds of years?

Do I have to take mana from my deck or hand when tapping this card?

How can I, as DM, avoid the Conga Line of Death occurring when implementing some form of flanking rule?

I keep switching characters, how do I stop?

Can you take a "free object interaction" while incapacitated?

Would this string work as string?

"Marked down as someone wanting to sell shares." What does that mean?

Should a narrator ever describe things based on a character's view instead of facts?

How can a new country break out from a developed country without war?

Index matching algorithm without hash-based data structures?

What is this high flying aircraft over Pennsylvania?

Turning a hard to access nut?

What (if any) is the reason to buy in small local stores?

Walter Rudin's mathematical analysis: theorem 2.43. Why proof can't work under the perfect set is uncountable.

How do I prevent inappropriate ads from appearing in my game?

Derivative of an interpolated function

How to test the sharpness of a knife?

A seasonal riddle

CSS/SASS Select elements based on class, but exclude certain elements with same class

Which characters are valid in CSS class names/selectors?How can I select an element by name with jQuery?How to style a <select> dropdown with only CSS?Remove CSS class from element with JavaScript (no jQuery)How do I combine a background-image and CSS3 gradient on the same element?CSS selector for first element with classHow can I set the default value for an HTML <select> element?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryCan I write a CSS selector selecting elements NOT having a certain class?Sass Variable in CSS calc() function

2

I am going to slap myself once an answer comes in... so what I am trying to do is add a border to all elements with <anyElement class="required active">, but not to <select class="required active">. Difference being the <select> element.

Example tried lol:

.required.active, :not(select.required.active) 
 border: 1px solid red;

Using CSS3 and/or SASS.

Thanks!

html css css3 sass

share|improve this question

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

add a comment | 

2

I am going to slap myself once an answer comes in... so what I am trying to do is add a border to all elements with <anyElement class="required active">, but not to <select class="required active">. Difference being the <select> element.

Example tried lol:

.required.active, :not(select.required.active) 
 border: 1px solid red;

Using CSS3 and/or SASS.

Thanks!

html css css3 sass

share|improve this question

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

add a comment | 

I am going to slap myself once an answer comes in... so what I am trying to do is add a border to all elements with <anyElement class="required active">, but not to <select class="required active">. Difference being the <select> element.

Example tried lol:

.required.active, :not(select.required.active) 
 border: 1px solid red;

Using CSS3 and/or SASS.

Thanks!

html css css3 sass

share|improve this question

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

.required.active, :not(select.required.active) 
 border: 1px solid red;

share|improve this question

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

share|improve this question

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

asked Mar 7 at 1:19

RooksStrifeRooksStrife

6362732

2 Answers
2

active

oldest

votes

1

Maybe this is what you're looking for.

As i've understood on your post, you only need to exclude < select > tags with "required" and "active" classes.

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

In this snippet, we used the :not() selector of CSS3 to eliminate the <select> tag with "required" and "active" classes.

For further explanation about the :not() CSS Selector, please refer to these links:

Dev. Mozilla Org: (CSS :not() Selector)

W3Schools.COM: (CSS :not() Selector)

share|improve this answer

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect - avoids the select tags, but borders all others with the classes. All done in the least amount of code!
  
  – RooksStrife
  Mar 7 at 18:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding @RooksStrife! :)
  
  – The Terrible Child
  Mar 8 at 1:23
  
  

  
  
  
  

add a comment | 

2

What you are looking can be achieved through this:
CSS:

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

let me know if you need any other help.

share|improve this answer

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55034627%2fcss-sass-select-elements-based-on-class-but-exclude-certain-elements-with-same%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Maybe this is what you're looking for.

As i've understood on your post, you only need to exclude < select > tags with "required" and "active" classes.

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

In this snippet, we used the :not() selector of CSS3 to eliminate the <select> tag with "required" and "active" classes.

For further explanation about the :not() CSS Selector, please refer to these links:

Dev. Mozilla Org: (CSS :not() Selector)

W3Schools.COM: (CSS :not() Selector)

share|improve this answer

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect - avoids the select tags, but borders all others with the classes. All done in the least amount of code!
  
  – RooksStrife
  Mar 7 at 18:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding @RooksStrife! :)
  
  – The Terrible Child
  Mar 8 at 1:23
  
  

  
  
  
  

add a comment | 

1

Maybe this is what you're looking for.

As i've understood on your post, you only need to exclude < select > tags with "required" and "active" classes.

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

In this snippet, we used the :not() selector of CSS3 to eliminate the <select> tag with "required" and "active" classes.

For further explanation about the :not() CSS Selector, please refer to these links:

Dev. Mozilla Org: (CSS :not() Selector)

W3Schools.COM: (CSS :not() Selector)

share|improve this answer

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect - avoids the select tags, but borders all others with the classes. All done in the least amount of code!
  
  – RooksStrife
  Mar 7 at 18:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding @RooksStrife! :)
  
  – The Terrible Child
  Mar 8 at 1:23
  
  

  
  
  
  

add a comment | 

Maybe this is what you're looking for.

As i've understood on your post, you only need to exclude < select > tags with "required" and "active" classes.

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

In this snippet, we used the :not() selector of CSS3 to eliminate the <select> tag with "required" and "active" classes.

For further explanation about the :not() CSS Selector, please refer to these links:

Dev. Mozilla Org: (CSS :not() Selector)

W3Schools.COM: (CSS :not() Selector)

share|improve this answer

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

:not(select).required.active 
 border: 1px solid red;

<div class="required active">
 qwe
</div>
<p class="required active">
 qwe
</p>
<input type="text" class="required active" value="qwe">
<select class="required active">
 <option value="1">qwe</option>
</select>

share|improve this answer

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

edited Mar 12 at 20:31

Mr Lister

35.3k1077121

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

answered Mar 7 at 1:42

The Terrible ChildThe Terrible Child

1036

2

What you are looking can be achieved through this:
CSS:

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

let me know if you need any other help.

share|improve this answer

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

add a comment | 

2

What you are looking can be achieved through this:
CSS:

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

let me know if you need any other help.

share|improve this answer

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

add a comment | 

What you are looking can be achieved through this:
CSS:

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

let me know if you need any other help.

share|improve this answer

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

.required.active:not(select).required.active{
border: 1px solid red;
color:blue

<!DOCTYPE html>
<html>
 <head></head>
<body>
 <p class="required active">Hello</p>
 <p class="required active">Hello</p>
 <p>Hello</p>
 <select class="required active">
 <option>Hello<option>
 </select>
</body>
</html>

share|improve this answer

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

edited Mar 7 at 6:48

Dharmesh Vekariya

7121622

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311

answered Mar 7 at 2:02

Faizan KhanFaizan Khan

331311