CODEWITHSUNDEEP
csscss-selectors
bevacqua
bevacqua

Reputation: 48476

CSS Selector for not a child of element type?

I want to style code elements that are not inside a tags.

What is the best approach to accomplish this?

code:not(a code) doesn't seem to work at all, at least on Chrome, even though it seems like it should

I can't get it to work from the console either.

Are there any other css-only approaches I could use for this?

Upvotes: 124

Views: 149640

Answers (3)

haotrg035
haotrg035

Reputation: 89

This works too:

h1:not(.original-style h1){
    /* This will apply for every h1 tag **not**
       in any .original-style at any level.
    */
}

Upvotes: 8

Magistern
Magistern

Reputation: 714

Actually, you should be able to use your code 🤔, or you could use the wildcard character to select all elements to not be selected

code:not(a *) {
  font-weight: bold;
}

Codepen

Upvotes: 40

Joseph Silber
Joseph Silber

Reputation: 219920

:not does not support combinator selectors.

If we're talking about its direct parent:

:not(a) > code

Otherwise there's no way to do this in CSS. You'll have to override it:

code {
    /* some styles */
}

a code {
    /* override previous styles */
}

Upvotes: 164

Related Questions