exclude CSS properties in a range of CSS classes

Asked Jan 17 '20 at 14:05

Active Jan 17 '20 at 15:39

Viewed 79 times

I create custom Pre css properties for specific tasks. After a change on my 'complete' website CSS I can't get these to work again.

I've got for exampe a Pre.PowerShell property:

pre.PowerShell {
    background-color: #012456;
    color: #fff !Important;
    font-family: consolas !Important;
    border-top: 8px solid #000;
    padding: 5px;
    width: 100%;
    overflow-y: scroll;
}

this worked until I added this:

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .comments-title, .search-field, .nav-links, .post-navigation .post-title, .widget-title {
    font-family: "Segoe UI", "Segoe WP", Arial, sans-serif !important;
    color: #000;
}

It overrides the settings I do in Pre.PowerShell. I've tried adding these and I think I'm close, but unfortunately I couldn't get it to work yet.

.PowerShell:not(pre)

pre:not(powershell)

pre:not(Pre.powershell)

pre:not(.PowerShell)

I have a hard time understanding the explanation here: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

edited Jan 17 '20 at 15:39

Mathias R. Jessen

157,619
12
148
206

asked Jan 17 '20 at 14:05

baswijdenesdotcom

2

Have you tried pre:not(.PowerShell) ? – Alonas Jan 17 '20 at 14:09
2

Avoid using `!important` in this manner: https://stackoverflow.com/a/3427813/2930477 – misterManSam Jan 17 '20 at 14:10
yep, tried pre:not(.PowerShell) as well ! – baswijdenesdotcom Jan 17 '20 at 14:11
2

Your code should work since `pre.PowerShell` is more [specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) than just `pre` Your issue might be somewhere else. – volt Jan 17 '20 at 14:19
And this is exactly the reason you shouldn't liberally use `!important` – Pete Jan 17 '20 at 14:36
i've removed all !important's and it still doesn't work ;-) – baswijdenesdotcom Jan 17 '20 at 14:44
Can you share the markup you're applying this CSS to? – TylerH Jan 17 '20 at 14:53

exclude CSS properties in a range of CSS classes

0 Answers0