reduce CSS selectors with fewer lines-CodePudding

Is it possible to reduce these CSS classes??

body.bank #page_content input,
body.bank #page_content textarea,
body.bank #page_content .inp-checkbox,
.list-tr.bank input,
.list-tr.bank textarea,
.list-tr.bank .inp-checkbox,
body.creditor #page_content input,
body.creditor #page_content textarea,
body.creditor #page_content .inp-checkbox,
.list-tr.creditor input,
.list-tr.creditor textarea,
.list-tr.creditor .inp-checkbox,
body.debtor #page_content input,
body.debtor #page_content textarea,
body.debtor #page_content .inp-checkbox,
.list-tr.debtor input,
.list-tr.debtor textarea,
.list-tr.debtor .inp-checkbox{
    --opacity-border:35%;
}

CodePudding user response：

Use the :where or :is pseudo-class.

:where(.list-tr.bank, .list-tr.creditor, .list-tr.debtor) :where(input, textarea, .inp-checkbox),
:where(body.bank, body.creditor, body.debtor) #page_content :where(input, textarea, .inp-checkbox) {
    --opacity-border: 35%;
}

CodePudding user response：

In terms of body.bank why not simply .bank class? Same with .list-tr. And it seems like #page_content could be replaced with an HTML main element.

CodePudding user response：

You can take a look at has selector https://developer.mozilla.org/en-US/docs/Web/CSS/:has