Affect any element with a combo class from an Interaction

Hi everyone, I wrote a litle piece about a trick that scratches some itches :wink:

There’s a way to target any element from an interaction, that I’m using for a long time and works quite well.

12 Likes

That is amazing!

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.

…Exactly!! Plan before you start!

2 Likes

@vincent – greatt tip. That’s been helpful for me just now!

Ah this is somewhat similar to the nested children selector hack using richtext editor.

1 Like

Say that again ?


I hereby name this:

The Nested Children Selector Hack

To create a CSS class like these so that you can style all links/images inside an element:

.my-section a { ... }
.my-section img { ... }

Instructions

  1. Create a dummy richtext editor with class mysection, add an image, then you will be able to style the images within the section.

  2. Now add the class mysection to a normal div. All images in there will still function the same way.

Demo

http://webflow-tricks.webflow.io/how-to-add-hover-zoom-to-rich-text

https://preview.webflow.com/preview/sandbox-903b9c?preview=2a77d4d5446ddad097abb9bf8603288b

Limitations

Note that this only works for elements that can be placed inside rich text:

  • link
  • bold
  • italic
  • h1 to h6
  • ul
  • ol
  • li
  • figcaption
  • img
  • blockquote
  • etc.
4 Likes

Woaw, that’s totally a “webflow secret” material :slight_smile:

Great to know… it’s possible that I had stumble upon this by accident without understanding it.