KPC
Kevin Powell - Communityabdelrahman

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;
}
No description
A
abdelrahman•15d ago
No description
M
MarkBoots•15d 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
A
abdelrahman•15d 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;
J
Jochem•15d ago
why are you wrapping everything in :where and :is?
A
abdelrahman•15d ago
i well remove it if you want
J
Jochem•15d ago
I'm just confused why you're using them
A
abdelrahman•15d ago
i just was trying something for every child for these elelments and :is was just easer and :is fixes " , " specify issue
Want results from more Discord servers?
Add your server
More Posts
Failed to load resource: the server responded with a status of 404 ()how to solve this error this is a youtube clone project help me to solve this Failed to load resourcCreating UI for gameI need to create a UI element for my project I have issue creating it and it's a little challengingVscode html relative links auto updater?Hello all, In Vscode if i move one of my root html files with navigation bar and links into a new fDNS records when moving from Digital Ocean to CloudflareHi all, Was just hoping for some help moving my site and keeping my emails up and running! My regisDisplaying a border image over another imageSo this is what i'm sitting at ```css .inner-image{ position: absolute; right: 0px; z-inGrid Layout Not functioning responsivelyI'm completely lost on how to make this fit in my ```main-message-container``` at all times I've trihtml input behaviouri've been wondering about this for awhile. when your text input starts running out of room the rightget value of sibling aboveHey, if i have a structure like so: ```html <p class="a">...</p> <p class="b">...</p> ``` ```css .a Error I dont understandHI everyone somebody can explain me what is going wrong hereSearch bar jsHow do i get results from my search barCan't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I cHow to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing upUsing escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several real