0

Is it possible to target all the data-attributes within an element that starts with data-am? The thing is that the .container can contain different types of data-attributes. Something like this below.

Note, I'm trying to target the data element itself, not one that contains value.

<div class="container">
  <div data-am-content>...</div>
</div>

.container {
    [data-am-*] {
         ...
    }
}

I know about targeting with a value

<div class="container">
   <div data-am-content="value">...</div>
</div>

.container {
   [data-am-content~="value"] {
      ...
   }
}
Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • 2
    No, there is only an attribute value contains selector and not an attribute name contains selector. – Harry Jun 02 '16 at 07:02
  • No css solution, but there's a js solution if you're interested? – Chris Jun 02 '16 at 07:10
  • I'm trying to keep it clean with css, it's ok I'll redo my hmtl a bit. Thanks for answers @Chris – Dejan.S Jun 02 '16 at 07:20
  • @Dejan.S. Sure thing. It seems like you were trying to use attribute names as values, by essentially having different `data-am-....` properties. It would be better to have something like `data-am-type="type"` or similar, and just change the value instead. – Chris Jun 02 '16 at 07:36

2 Answers2

0

create more classes for your div elements and refer to them

<div class="container am-foo am-bar"></div>

you can refer to them in css as either

.container
.am-foo
.am-bar

Does not have to be on container just add classes to element

Gustav Coetzee
  • 59
  • 2
  • 10
0

Sorry but there is no way to select partial data attribute however you can style for every possible data attributes separately like

[data-rm-content] {
    /* Some Styles */
}
[data-rm-type] {
    /* Some Styles */
}

https://jsfiddle.net/w0a29rxu/3/

Edit: You can easily do with javascript see this Question How can I select an element with jQuery by matching a partial attribute?

Community
  • 1
  • 1
Waqar Khan
  • 16
  • 2