Tricky CSS selector?

Question

css

There is HTML like this:
[DIV CLASS="SHOW-1"]
[DIV CLASS="SHOW-1"]1[/DIV]
[DIV CLASS="SHOW-2"]2[/DIV]
[DIV CLASS=" SHOW-3"]3[/DIV]
[DIV CLASS="SHOW-4"]4[/DIV]
[/DIV]
Is it possible to write such a CSS2 rule that ONLY DIV.SHOW-1 would be displayed with the given structure, i.e. .e. "one". If you change the class to .SHOW-2 for the outer div, then only 2 will be shown. At the same time, the selector would not depend on the number and names of children, but show only the child class of which matches the parent's class. When generating, it is not known how many children it will have.
UPD: please read the question very important. Especially the last sentence.

Answer 1

Sorry, this certainly does not solve your problem, just a minute of time and a desire to check something stood out. As s0rr0w already said :

Selectors with dynamic names are against the intent of CSS.

But the latest browsers allow us to create css rules through javascript . Result: jsfiddle .

Answer 2

Selectors with dynamic names are against the intent of CSS. Use JS or backend

Answer 3

In css2 - definitely nothing, only JS. If js can still be used, I can throw in a script (there are a couple of lines)

Answer 4

.show div { display: none }
.show-1 .show-1 { display: inline }
.show-x .show-x { display: inline }
The first div has two classes: [DIV CLASS="show SHOW-1"] (the first one to hide everything, the second to show the one you need)
if you are too lazy to give two classes to the first, then this:
.show-1 div { display: none }
.show-1 .show-1 { display: inline }
.show-2 div { display : none }
.show-x .show-x { display: inline }
This is just a theory, I haven't tested it =) but it should work

Answer 5

And what for?
If you look in the direction of how nested menus are made, then there is no need for such tricky .. intricate designs - everything is done through the nesting of subordinate blocks and control through: hover or .active Explain?

Answer 6

.show-1 {}
.show-1 .show-1 {display:block;}
.show-1 div {display:none;}
.show-2 {}
.show-2 .show-2 {display:block; }
.show-2 div {display:none;}
and so on if there is no way to change the class of the parent