CSS replacement for everything except element

Question

I have a card in which I have a checkbox.

When it is checked, I want to disable the operation of the entire card except this checkbox item

The checkbox must be running to be able to restore operation

I try so but it doesn't work. Can it be done?

CSS is supposed to work on everything except the input type checkbox

.cardWrapper.done:not(input[type='checkbox']) {
    pointer-events: none;
    color: #AAA !important;
    background: #F5F5F5 !important;
}

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Jun 02 '22 at 15:10
@Paulie_D Thanks. There is nothing like help not in the topic — DeveloperApps, Jun 02 '22 at 15:12
to achieve that you have to understand how checkboxes work: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp and how to affect children and brother html elements with css: https://stackoverflow.com/questions/46673303/how-to-select-a-div-inside-another-element-when-a-checkbox-input-is-checked — Andrew Garcia, Jun 02 '22 at 15:53
We can only guess and waste our time unless you provide your HTML, and enough code to figure out what your problem is. Read the link PaulieD gave — Zach Jensz, Jun 02 '22 at 15:54

0 Answers0