Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS match elements with ANY attribute

Is there a CSS selector that matches elements that have ANY attribute?

<div>, <p>, and <h2> would not match but <div class="important">, <p align="left"> and <h2 id="rt0"> would.

like image 865
JPM Avatar asked Jun 10 '26 20:06

JPM


2 Answers

There is no such selector.1

Such a selector has been proposed or requested a number of times over the last several years, and out of these the only time someone even bothered to suggest a use case, it's one that has no relevance to CSS at all:

this selector would be useful for debugging purposes in order to verify in complex layouts whether an element has attributes or not (instead of using DOM's hasAttributes() method).

Even if this was your use case (which, like the other threads on www-style, you haven't stated at all in your question), the fact remains that no such selector exists.


1 There is ::attr(*), but that selects attribute nodes, not element nodes based on attributes (which, ostensibly, is what the asker is interested in). Completely different things.

like image 170
BoltClock Avatar answered Jun 14 '26 01:06

BoltClock


As of today (Feb 27 2017), it isn't possible.

Some insane people might go out and list every single official attribute and put it in a CSS rule (JSFiddle). If you can't be bothered to visit that link, here it is:

[aria-activedescendant], [aria-atomic], [aria-controls], [aria-describedby], [aria-dropeffect], [aria-haspopup], [aria-label], [aria-labelledby], [aria-live], [aria-multiselectable], [aria-owns], [aria-readonly], [aria-relevant], [aria-required], [aria-sort], [aria-valuemax], [aria-valuemin], [aria-valuenow], [onabort], [onautocomplete], [onautocompleteerror], [onDOMContentLoaded], [onafterprint], [onafterscriptexecute], [onbeforeprint], [onbeforescriptexecute], [onbeforeunload], [onblur], [oncancel], [onchange], [onclick], [onclose], [onconnect], [oncontextmenu], [onerror], [onfocus], [onhashchange], [oninput], [oninvalid], [onlanguagechange], [onload], [onloadend], [onloadstart], [onmessage], [onoffline], [ononline], [onopen], [onpagehide], [onpageshow], [onpopstate], [onprogress], [onreadystatechange], [onreset], [onselect], [onshow], [onsort], [onstorage], [onsubmit], [ontoggle], [onunload], [onloadeddata], [onloadedmetadata], [oncanplay], [onplaying], [onplay], [oncanplaythrough], [onseeked], [onseeking], [onstalled], [onsuspend], [ontimeupdate], [onvolumechange], [onwaiting], [ondurationchange], [onemptied], [onunhandledrejection], [onrejectionhandled], [onafterprint], [onbeforeprint], [onbeforeunload], [onhashchange], [onlanguagechange], [onpopstate], [onrejectionhandled], [onstorage], [onunhandledrejection], [onunload], [accept], [accept-charset], [accesskey], [action], [align], [alt], [aria], [async], [autocomplete], [autofocus], [autoplay], [autosave], [bgcolor], [border], [buffered], [challenge], [charset], [checked], [cite], [class], [code], [codebase], [color], [cols], [colspan], [content], [contenteditable], [contextmenu], [controls], [coords], [data], [datetime], [default], [defer], [dir], [dirname], [disabled], [download], [draggable], [dropzone], [enctype], [for], [form], [formaction], [headers], [height], [hidden], [high], [href], [hreflang], [http-equiv], [icon], [id], [integrity], [ismap], [itemprop], [keytype], [kind], [label], [lang], [language], [list], [loop], [low], [manifest], [max], [maxlength], [media], [method], [min], [multiple], [muted], [name], [novalidate], [open], [optimum], [pattern], [ping], [placeholder], [poster], [preload], [radiogroup], [readonly], [rel], [required], [reversed], [rows], [rowspan], [sandbox], [scope], [scoped], [seamless], [selected], [shape], [size], [sizes], [slot], [span], [spellcheck], [src], [srcdoc], [srclang], [srcset], [start], [step], [style], [summary], [tabindex], [target], [title], [type], [usemap], [value], [width], [wrap] {  ...  }

But then again, who'd want that, that's like 2500 characters long.

Even with all that wasted potential gone into attribute research, there are still some things that extensive list doesn't cover, such as custom data-* attributes or even weird "HTML Microdata" attributes:

screenshot

itemscope? itemtype? What does that even do?!

So, unfortunately, as of today, you're gonna have to find an alternative solution to whatever problem is in your hands.

like image 33
Matheus Avellar Avatar answered Jun 14 '26 01:06

Matheus Avellar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!