CSS

Question

I'm trying to hide an element with CSS, if body has any class applied to it.

<body class="x"> - element should hide
<body class="a"> - element should hide
<body> - element should show

This element should appear if body is classless or has the class .page-home,

but otherwise, the element should be hidden.

I've tried the universal selector:

#body.* .withicon {
display:none;
}

.page-home .withicon {
display:block;
}

which didn't work,

I've tried tricks like

.withicon {
display:none;
}

.page-home .withicon {
display:block;
}

.withicon:not([class]) {
display:none;
}

But I cant seem to get it working, at all.

Josh Crozier · Accepted Answer

The .withicon element should appear if body is classless or has the class .page-home

Based on the selectors in your question, it seems like you want the following:

.withicon {
  display: none;
}

body:not([class]) .withicon,
.page-home .withicon {
  display: block;
}

You were negating .withicon elements with a class attribute when you should have been negating the body element if it had a class attribute using the selector body:not([class]).

In other words, the selector body:not([class]) .withicon will select the .withicon descendant elements if the body element doesn't have a class attribute.

CSS - If element has ANY class

Tags:

html

RNPF

1 Answers

Josh Crozier

Recent Activity

Donate For Us