Alvaro Alvaro - 1 year ago 48
CSS Question

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

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 Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download