0

I was debugging my UI using Chrome DevTools and recently came across brackets as selector for styling.

Could anyone explain what kind of CSS selector is this:

    [data-openweb-style-wrapper][data-openweb-style-wrapper] .spcv_conversation-header .spcv_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

enter image description here

I'm confused with this part, I don't exactly understand, is this even a part of CSS or some bloat added by the chrome?

    [data-openweb-style-wrapper][data-openweb-style-wrapper]
Sunil Kumar Das
  • 372
  • 1
  • 2
  • 12
Nishant Kumar
  • 691
  • 1
  • 11
  • 31
  • 2
    Just search *css square brackets selector* or something. Like here: [Square brackets in CSS](https://stackoverflow.com/questions/16041149/square-brackets-in-css) – Peter Krebs Feb 03 '23 at 09:25
  • It's the [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). It matches all elements with a data-openweb-style-wrapper attribute. As to why it appears twice, I can only imagine it's generated automatically as [data-openweb-style-wrapper][data-openweb-style-wrapper] and [data-openweb-style-wrapper] do the same thing – Adam Feb 03 '23 at 09:27

0 Answers0