Apply CSS Style on All Elements Except with a Specific Id

Apply CSS Style on all elements except with a SPECIFIC ID

Use the :not selector:

div:not(#bar){

    color:red;

}

<div>foo</div>

<div id="bar">bar</div>

How do I apply css to all elements except when first child is of certain id

If you were to use jQuery you could access the element like this:

$('.content-body > :not(#container-special)').parent().css("max-width", "1050px")

Or for normal JS you could set the CSS:

.content-body {
  max-width: 1050px;
}

And then remove it from the element that contains the element with that ID:

var cs = document.getElementById('container-special')
var parent = cs.parentElement

if (parent.className == 'content-body') {
  parent.style.maxWidth = "initial"
}

Apply css to all element except one who has specific parent

Try this code

div:not(.sidebar) ul.group li {

  border: 1px solid red;

}

// Here i have used div, but you can use whatever tag you have used for sidebar

<body class="page">

  <div class="sidebar">

    <ul class="group">

      <li>1</li>

      <li>2</li>

      <li>3</li>

    </ul>

  </div>

  

  <div class="page-section">

    <ul class="group">

      <li>1</li>

      <li>2</li>

      <li>3</li>

    </ul>

  </div>

  

</body>

Apply CSS for all buttons except a specific ID

button:not(#startAction):not(#endAction)

by @underscore_d

Apply style to all divs except one specific

Just apply the rule to all divs first:

#toolbar div {
   float: left;
   background-repeat: no-repeat;
   margin: 2px 12px 2px 12px;
}

Then you need to zero the values out for the specific case:

#toolbar div.olControlNavigationHistor {
   float: none;
   background-repeat: repeat;
   margin: 0;
}

Of course this assumes that the property values that specific div would have had without the first rule applied are each properties defaults (such as margin: 0 and float: none.)

EDIT:
However in the future when CSS3 is supported everywere, you could also just rewrite your original rule as #toolbar div:not(.olControlNavigationHistory) and it would work correctly and elegantly.

CSS: styling ALL elements on a page EXCEPT the children of a specific elements?

You’re close. :not() doesn't work as well as you'd expect with ID selectors, despite the relevant standards.

This doesn't work:

*:not(#keep-original) * {
  color: var(--colour-1);
}

But this does:

div:not(#keep-original) * {
  color: var(--colour-1);
}

For some reason, you have to prefix :not() with something more specific than *.

I suggest you use a class instead (which is always a good idea anyway):

<div class='keep-original'>

and then this will work:

*:not(.keep-original) * {
  color: var(--colour-1);
}

Apply an effect on each element in html tag except one element (ID/class)

OK, so following up on the edits and looking into the related post there is a lot to unpack here. Between your original closed question and this new one with the edits, I see one (maybe two?) problems you are trying to solve:

When you apply the filters, in Firefox the buttons lose their position.
You would (maybe?) like the buttons to not be affected by the filter.

I've created a slightly modified snippets that works with your code and address both issues:

For the issue of button placement:

function change()

{

  document.getElementsByTagName('html')[0].classList.toggle('new-theme');

}

html {

  height: 100%; /* Fixes the buttons losing position in firefox */

}

.new-theme {

  filter: invert(100%) hue-rotate(180deg);

  -webkit-filter: invert(100%) hue-rotate(180deg);

  -moz-filter: invert(100%) hue-rotate(180deg); 

  -o-filter: invert(100%) hue-rotate(180deg);

  -ms-filter: invert(100%) hue-rotate(180deg);

}

#fixedbutton {

  position: fixed;

  bottom: 20px;

  right: 20px;

}

h1{

  color:blue;

}

#anotherfixedbutton {

  position:fixed; 

  bottom:20px; 

  left: 20px

}

<html>

  <head>

  </head>

  <body>

    <h1> Some text </h1>

    <button id="fixedbutton" onclick="change()">CLICKME</button>

    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>

  </body>

</html>

How can I select all elements with a class except one that has an ancestor with an id that matches a pattern?

I would add one rule that targets all the .ps-label then another that targets your exception

.ps-label{

  color:red;

}

/* exception rule*/

#win5divG4FORM_WRK_G4FORM_IDlbl .ps-label {color:blue;}

<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">

  <div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">

    <span class="ps-label">Form ID</span>

  </div>

  <span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>

  <div class="ps_box-label" id="win5divG4FORM_WRK_G4FORM_IDlbl">

    <span class="ps-label">Form ID</span>

  </div>

  <span class="ps_box-value" aria-disabled="true" id="G4FORM_WRK_G4FORM_ID">416</span>

  <div class="ps_box-label" id="win5divG5FORM_WRK_G5FORM_IDlbl">

    <span class="ps-label">Form ID</span>

  </div>

  <span class="ps_box-value" aria-disabled="true" id="G5FORM_WRK_G5FORM_ID">417</span>

</div>

Apply CSS Style on All Elements Except with a Specific Id