I'm not sure what you mean by "hidden by default" so please let me know if I've misinterpreted your question.
The :not() selector is how you exclude some elements from a CSS selector. If that's what you're trying to do you're on the right track.
body*:not([style="hidden"]){/* your style rules */}
would apply your style rules to all elements in your <body> tag, except elements with a style="hidden" attribute. For example it would only apply to the h1 here:
It's worth noting that style="hidden" isn't a valid style attribute and it won't do anything if you add it to your HTML. If you are trying to hide elements with CSS it's better to use a class. e.g.
.hidden{display:none;}
The you can use it to hide your HTML elements like so:
What I meant by "hidden by default" is things like <script>, <link>, etc...
And just so I
1) don't have to manually write all that out.
AND (especially) 2) so I don't have to update my CSS, if new or existing elements are updated to be hidden by default.
Interesting... Your question made me learn something new today!
I'd never thought about styling script, link, and other "hidden" tags. That thought just never occurred to me as something you can do. But apparently it can be done. Stick this on any script tag in your body, for example:
But I understand that you want the opposite: to prevent styles from getting applied to these elements. You don't actually have to worry about this, though, because these tags get display: none set by default, so they don't show up at all. You can verify this by inspecting any "hidden" element in your browser's dev tools:
I KNOW they have it by default, but I'm using body *, but I want to negate this styling from the specific elements that begin with (or (only) POSSIBLY have) styling none, so that I don't have to specify all of the ones that are hidden, or update my CSS in the future (if more default-hidden elements are put into HTML).
I have also never thought about applying styling to tags like script. Is the problem you are having that styles are being applied to <script> elements in the body of your page?
It's a strange problem you've run into. It's because body * is a very generous selector. Too generous for changing the display property. As you've highlighted, this makes script elements visible. As a best practice you'll want to be more specific with what elements you apply style rules to.
An alternative here would be to create an extra "container" element for all your visible elements. For example:
<body><divclass="container"><h1>Title</h1><!-- all your "visible" elements here --></div><script>/* Script tags and any other "hidden" elements outside the container */</script></body>
Then you can be more specific with your style rules, without affecting the script elements:
body.container*{display:inline-block;/* your other style rules */}
link elements are more commonly placed in the <head> of a web document, so you shouldn't need to worry about styles being applied to them if you move them to the <head>.
I hope that helps solve your problem. But if you do want to exclude elements like link and script, you should be able to do so with:
I'm not sure what you mean by "hidden by default" so please let me know if I've misinterpreted your question.
The
:not()
selector is how you exclude some elements from a CSS selector. If that's what you're trying to do you're on the right track.would apply your style rules to all elements in your
<body>
tag, except elements with astyle="hidden"
attribute. For example it would only apply to theh1
here:It's worth noting that
style="hidden"
isn't a valid style attribute and it won't do anything if you add it to your HTML. If you are trying to hide elements with CSS it's better to use a class. e.g.The you can use it to hide your HTML elements like so:
What I meant by "hidden by default" is things like
<script>
,<link>
, etc...And just so I
1) don't have to manually write all that out.
AND (especially) 2) so I don't have to update my CSS, if new or existing elements are updated to be hidden by default.
Interesting... Your question made me learn something new today!
I'd never thought about styling
script
,link
, and other "hidden" tags. That thought just never occurred to me as something you can do. But apparently it can be done. Stick this on any script tag in your body, for example:But I understand that you want the opposite: to prevent styles from getting applied to these elements. You don't actually have to worry about this, though, because these tags get
display: none
set by default, so they don't show up at all. You can verify this by inspecting any "hidden" element in your browser's dev tools:I KNOW they have it by default, but I'm using
body *
, but I want to negate this styling from the specific elements that begin with (or (only) POSSIBLY have) stylingnone
, so that I don't have to specify all of the ones that are hidden, or update my CSS in the future (if more default-hidden
elements are put into HTML).I have also never thought about applying styling to tags like
script
. Is the problem you are having that styles are being applied to<script>
elements in thebody
of your page?It's a strange problem you've run into. It's because
body *
is a very generous selector. Too generous for changing thedisplay
property. As you've highlighted, this makesscript
elements visible. As a best practice you'll want to be more specific with what elements you apply style rules to.An alternative here would be to create an extra "container" element for all your visible elements. For example:
Then you can be more specific with your style rules, without affecting the
script
elements:link
elements are more commonly placed in the<head>
of a web document, so you shouldn't need to worry about styles being applied to them if you move them to the<head>
.I hope that helps solve your problem. But if you do want to exclude elements like
link
andscript
, you should be able to do so with: