CSS :not operator for parent

Question

<input type="checkbox" >

<aup-switch>
    <input type="checkbox" >
</aup-switch>

I have a css style for input[type="checkbox"], but I don't want it to be applied to the input components inside aup-switch. I tried using not selector of css, but not working.

input[type="checkbox"]:not(aup-switch input[type="checkbox"]) {
    &+label {
        position: relative;
        cursor: pointer;
        padding: 0;
    }
}

Note that the ` ` tag does not use and does not need a closing slash and never has in HTML. — Rob, Jul 30 '19 at 02:38
Sadly, I can't. I can't access the other codebase, so only use not selector to exclude the special items. And the label component is added as a child dynamically. — vhurryharry, Jul 30 '19 at 02:48
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) .CSS can not currently "go back up" the DOM — Jon P, Jul 30 '19 at 04:13

score 1 · Answer 1 · answered Jul 30 '19 at 03:30

1

consider code:

// scss:
aup-switch {
  input {
   // other styles
   }
}

input {
 position: relative;
 cursor: pointer;
 padding: 0;
}


// compiled

aup-swich input { // other styles }
input { position: relative; cursor: pointer; padding: 0;}

answered Jul 30 '19 at 03:30

zq-jhon

109
1
7

score 1 · Accepted Answer · answered Jul 30 '19 at 04:08

use *:not(aup-switch) > input[type='checkbox'] selector instead

*:not(aup-switch) > input[type='checkbox'] {
  -webkit-appearance: unset;
  width: 10px;
  height: 10px;
  background-color: red;
}

Normal checkbox: <input type="checkbox" >

<aup-switch>
    aup-switch checkbox: <input type="checkbox" >
</aup-switch>

CSS :not operator for parent

2 Answers2