Home > Software design >  How to select specific class prefix while excluding other prefix?
How to select specific class prefix while excluding other prefix?

Time:09-28

I need to select the body element when it has a class beginning with post-type- but not select it when there's also a class beginning with taxonomy-. Does anyone know how to get this to work?

body[class^="post-type-"],
body[class*=" post-type-"] {
    &:not([class^="taxonomy-"]),
    &:not([class*=" taxonomy-"]) {
        .widefat {
            .check-column {
                display: none;
            }
        }
    }
}

EDIT: 0stone0's answer below helped me realize the CSS it was outputting was completely wrong, so this new approach is working well:

body[class^="post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]),
body[class*=" post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]) {
    .widefat {
        .check-column {
            display: none;
        }
    }
}

CodePudding user response:

div[class*='post-type-']:not([class*="taxonomy-"])

This pure CSS should target the desired element


Select classes that contain post-type-, but not() containing taxonomy-

div[class*='post-type-']:not([class*="taxonomy-"]) {
    border: 1px solid red;
}
<div class='post-type-something'>post-type-something</div>
<div class='post-type-something taxonomy-foobar'>post-type-something taxonomy-foobar</div>
<div class='taxonomy-foobar post-type-something'>taxonomy-foobar post-type-something</div>

Note: Demo uses <div> instead of <body> and applies a border when targeted

  • Related