JPM
JPM

Reputation: 2066

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.

Upvotes: 2

Views: 1941

Answers (2)

BoltClock
BoltClock

Reputation: 723618

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.

Upvotes: 6

Matheus Avellar
Matheus Avellar

Reputation: 1515

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.

Upvotes: 4

Related Questions