CSS selector that refers to an attribute value which is the same as the parent [duplicate]

Question

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.

Answer 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!