how to isolate an element from specific styles

i want to isolate this .not-content element from global styles but i want an other styles to effect

:where(:is(button, input, optgroup, select, textarea)) {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;


:where(:is(button, [type="button"], [type="reset"], [type="submit"])) {
  -webkit-appearance: button;
  appearance: button;
}

:where(:is(button, select)) {
  text-transform: none;
}

:where(:is(img, picture, video, canvas, svg)) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(:is(button, input, optgroup, select, textarea)) {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;


:where(:is(button, [type="button"], [type="reset"], [type="submit"])) {
  -webkit-appearance: button;
  appearance: button;
}

:where(:is(button, select)) {
  text-transform: none;
}

:where(:is(img, picture, video, canvas, svg)) {
  display: block;
  max-width: 100%;
  height: auto;
}

7 Replies

abdelrahmanOP•9mo ago

MarkBoots•9mo ago

if that element has a unique class/id, you could try this

.non-content, .non-content *{
  all: revert;
}

.non-content, .non-content *{
  all: revert;
}

then you can target everything inside and give it your specific styles

abdelrahmanOP•9mo ago

thanks but that don't save form global styles

:where(html) {
  font-size: 20px;
  height: 100%;
  font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body) {
  overflow: hidden;
  line-height: 1.5;
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  color: hsl(var(--darkest));
  background-color: hsl(var(--white));
}

:where(html) {
  font-size: 20px;
  height: 100%;
  font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body) {
  overflow: hidden;
  line-height: 1.5;
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  color: hsl(var(--darkest));
  background-color: hsl(var(--white));
}

line-height: 1.5;

Jochem•9mo ago

why are you wrapping everything in :where and :is?

abdelrahmanOP•9mo ago

i well remove it if you want

Jochem•9mo ago

I'm just confused why you're using them

abdelrahmanOP•9mo ago

i just was trying something for every child for these elelments and :is was just easer and :is fixes " , " specify issue

Gaming

Programming

how to isolate an element from specific styles

Did you find this page helpful?