How to select tags that don't have any attributes using CSS?
For example, I want to select <div>
tags that don't have any attributes, including class
, id
, style
, data-*
, etc. I only want to select <div>
tags with only div
, and no other attributes after it.
Is it possible to do that?
How to select tags that don't have any attributes using CSS?
For example, I want to select <div>
tags that don't have any attributes, including class
, id
, style
, data-*
, etc. I only want to select <div>
tags with only div
, and no other attributes after it.
Is it possible to do that?
Share Improve this question asked Feb 18 at 2:28 Banana CodeBanana Code 8273 gold badges13 silver badges29 bronze badges 1- It's an interesting question, but I'm curious about why you want to do this. If you can edit your question to include an explain of why you want to be able to do this, the community may be able to suggest a better approach. – Brett Donald Commented Feb 18 at 3:10
1 Answer
Reset to default 6No, it’s not possible. All you can do is :not()
with a list of specific attribute selectors you want to exclude.
div:not([id],[class],[style],[data-xyz]) {
color: red;
}
<div>One</div>
<div id="two">Two</div>
<div class="three">Three</div>
<div style="four">Four</div>
<div data-xyz="five">Five</div>
<div id="six" class="six" style="six" data-xyz="six">Six</div>
<div something-unexpected>Seven</div>
It may be better to use Javascript instead, where you can check if the length of the attributes property is zero.
document.querySelectorAll('div').forEach(d => {
if (d.attributes.length == 0)
d.style.color = 'red'
})
<div>One</div>
<div id="two">Two</div>
<div class="three">Three</div>
<div style="four">Four</div>
<div data-xyz="five">Five</div>
<div id="six" class="six" style="six" data-xyz="six">Six</div>
<div something-unexpected>Seven</div>