1

is possible to apply some css based on other elements data attributes? For example we have four elements:

<span class="aaa" data-value="aaa">one</span>
<span class="bbb" data-value="bbb">
display only if the third element has data value</span>
<span class="ccc" data-value="">three</span>
<span class="ddd" data-value="ddd">four</span>

and I want to display the second span only if the third span data-value attribute has some value.

I'm trying to do this using css not JS !

fiddle:

mcmwhfy
  • 1,654
  • 5
  • 36
  • 58
  • 1
    No, css has neither a parent, nor previous sibling(s), selector. – David Thomas Apr 20 '17 at 11:50
  • @ovokuro maybe read more careful the question and see also the content ? talking about html5 data attributes here ? – mcmwhfy Apr 20 '17 at 11:53
  • @David Thomas maybe read more careful the question and see also the content ? talking about html5 data attributes here? – mcmwhfy Apr 20 '17 at 11:53
  • 2
    I did read the question quite thoroughly, and css still has no means of styling an element based on a following element's attributes, because there is no previous-sibling selector. – David Thomas Apr 20 '17 at 11:55
  • @David Thomas and if not why you consider as duplicate ? – mcmwhfy Apr 20 '17 at 11:57
  • 1
    I understand what you're asking. Using CSS, there is currently no way to target the previous element, regardless of attributes etc. – sol Apr 20 '17 at 12:05
  • @ovokuro let's be efficient guys, that is another story but not duplicate ;) – mcmwhfy Apr 20 '17 at 12:06
  • 1
    @mcmwhfy You're splitting hairs. Nobody can give you a solution using CSS based on your markup. If you can change your HTML or are open to JS then you'll find a workaround. Best of luck – sol Apr 20 '17 at 13:23

1 Answers1

0

Yes, it's possible to apply CSS on an element based on its attribute, but not based on other elements attributes, like this:

span[data-value="bbb"] {
    /* some properties, but only for the span with 'data-value="bbb"'*/
}
Catalin Iancu
  • 722
  • 5
  • 18