The situation

Let's build a container with three shapes. they're all shapes, but two of them are also colored, one of the colored one is green and the other orange.

Oustide of this container, let's put another container with buttons as controls to change the shape of the colored elements.

The blueprint structure looks like this.

The first interaction is pretty straight forward to build. Once the button selected and the interaction created, we Affect another element, search for shape and select it.

And we set the interaction steps.

It immediately works.

We create the same interaction in reverse for the Reset button.

So far, everything works. That's when we try to create the interaction to target the green shape that it stops working. We select the second button and create an interaction, select Affect another element and search for green.

The green shape is not listed, because it has more than one class. It has combo classes, so Webflow doesn't allow us to select it.

The trick

The trick consists in making Webflow list that class.

Let's create a dummy DIV and give it the class green. Even if you have to create the class green, that is already existing as a combo class for shape.

Now back at our interaction, we can list and select the class green.

And build the Opacity change interaction.

Once that's done, we can delete the dummy DIV, it's useless now.

The interaction properly works...

And the Reset interaction still works... So it's not really the original green class that has been affected because it shouldn't, logically.

We can create a new control, using the same system. Creating a dummy DIV and giving it the class colored. Then target it, and delete it.

Now there are three disctinct ways to target those shapes. Shape, Colored, or a specific color.

It's useful for a lot of things. Especially everyime you want to have a unique close or reset button for a series of popups or elements. This way, you can use combo classes to limit the effects of your interaction rather than only relying on Limit to siblings and Limiti to Nested, wich are only useful for a certain, imposed structure.

It's also useful to build app prototypes and have buttons targeting anything in the screen, without having to think it way ahead.

Now, without using this trick, almost anything is possible in targeting elements with interactions, but you have to think it before starting to build a structure and give class names to elements.

‍