Kevin Powell - Community•2mo ago

Help with a CSS selector that targets all elements that have "aria-*" attributes

Is it possible to target all elements that have an attribute with a specific prefix like "aria-"? I want to select all aria attributes like "aria-label", "aria-labelledby", "aria-level" and so on...

15 Replies

ἔρως•2mo ago

do you use sass? if you do, make a list with all attributes if not, do the work manually you can use :is(), :where() or repeat each selector manually

snxxwyy•2mo ago

you could also do this using js by doing something like:

const elements = document.querySelectorAll("body *");

elements.forEach(elem => {
  attributes = Array.from(elem.attributes);
  attributes.forEach(attr => {
    if (attr.name.startsWith("aria")) {
      console.log(`${elem.tagName} has an aria attribute.`)
    }
  })
})

const elements = document.querySelectorAll("body *");

elements.forEach(elem => {
  attributes = Array.from(elem.attributes);
  attributes.forEach(attr => {
    if (attr.name.startsWith("aria")) {
      console.log(`${elem.tagName} has an aria attribute.`)
    }
  })
})

ἔρως•2mo ago

unless it is to use in css, for styles

snxxwyy•2mo ago

yeah

clevermissfox•2mo ago

*[aria-*] {
  /* Your styles here */
}

*[aria-*] {
  /* Your styles here */
}

ἔρως•2mo ago

snxxwyy•2mo ago

you can only do that with values of the attribute i believe, not the name. e.g.

[data-test^="aria"] {
  /* Your styles here */
}

[data-test^="aria"] {
  /* Your styles here */
}

meaning it selects all elements that have the attribute of data-test with a value that starts with aria i think to actually test if the name includes a substring you have to use js

ἔρως•2mo ago

the challenge is to select anything that has an attribute starting with aria- it's the name of the attribute, not the value

snxxwyy•2mo ago

i know i was saying it in response to the error you posted

ἔρως•2mo ago

the error was to show it doesnt work would be awesome if it did

snxxwyy•2mo ago

yeah, i was just explaining why it didn't to benefit op and clevermissfox

ἔρως•2mo ago

oh, i though you misunderstood what i sent

snxxwyy•2mo ago

i could have referred to the context in my message a bit better, that's my bad.

ἔρως•2mo ago

no, it's my bad too i should pay more attention

snxxwyy•2mo ago

it's all good, we got it in the end

Gaming

Programming

Help with a CSS selector that targets all elements that have "aria-*" attributes