2

I have a list of divs where only one at a time shows. This depends on the attribute value the parent has. For example:

HTML:

<div id="parent" data-something="c">
  <div class="children" data-something="a"></div>
  <div class="children" data-something="b"></div>
  <div class="children" data-something="c"></div>
  <div class="children" data-something="d"></div>
</div>

CSS:

.children
{display: none;}

#parent[data-something="a"] .children[data-something="a"]
{display: block;}

#parent[data-something="b"] .children[data-something="b"]
{display: block;}

/*  etc. */

Is there any way I can make this selector choose the corresponding children based in the parent attribute value?

Something like:

#parent[data-something="*"] .children[data-something="*"]
{display: block;}

The reason behind is I am not sure how many children I may have and I want to see if there is a way, in pure CSS, to avoid writing all the possibilities.

Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • The only way would be to do it for all options as you have done in your first example. I take it you are using some sort of server side language to output those data attributes? if so you should make your server side language do the complex things (after all css is only meant for styling), and add a class when your attributes match their parents attribute – Pete Feb 07 '17 at 12:26
  • @Pete if that is the only way I will probably end up using JavaScript as I can't know how many items will there be and I prefer not creating 1000 possibilities in CSS. – Alvaro Feb 07 '17 at 12:27
  • @NenadVracar Thank you for the suggestion. Well, the thing is the parent changes with JavaScript. Your suggestion is the same but the other way round, so it doesn't solve the problem. – Alvaro Feb 07 '17 at 12:34

1 Answers1

1

So, you want a generic descendant selector, where the value of the data-something property of your ancestor is the same as always the value of data-something property of your descendant, no matter what that value is?

Unfortunately, that's not possible with CSS!

John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • Thanks for the answer, but this doesn't solve the problem. – Alvaro Feb 07 '17 at 12:37
  • @Alvaro: Well, you did say "attribute", and not "attribute value", although judging from the question it's clear you meant the latter. – BoltClock Feb 07 '17 at 12:45
  • @BoltClock Thanks, question edited. – Alvaro Feb 07 '17 at 12:47
  • @Alvaro : So [**this**](https://jsfiddle.net/1xf26snv/1/) is not what you're trying to achieve? Please explain what it is you're looking for, then... – John Slegers Feb 07 '17 at 12:47
  • @JohnSlegers I am looking for a selector that prevents me from writing all the possibilities, like in **[this fiddle](https://jsfiddle.net/1xf26snv/2/)**. – Alvaro Feb 07 '17 at 12:49
  • @Alvaro : So the value of `data-something` of your parent should be the same for the value of `data-something` of your child? – John Slegers Feb 07 '17 at 12:51
  • I'd assume so, based on the listing shown in the question. – BoltClock Feb 07 '17 at 12:52
  • @JohnSlegers Yes. Basically I'm trying to find a way to relate an attribute value of the parent with an specific child, and find a way to manage all posibilities. But it looks like it is not possible without writing each case. – Alvaro Feb 07 '17 at 12:53
  • @Alvaro : In CSS, that's not possible, indeed. Why do you want this functionality? – John Slegers Feb 07 '17 at 13:01
  • 1
    @JohnSlegers Show or hide the children except an specific element, if this was possible it would be a very convenient way. But I'll have to rely in a simple "active" class change and JavaScript. Thanks for the time :) – Alvaro Feb 07 '17 at 13:06