Streaming live at 10am (PST)

Affect any element with a combo class from an Interaction


#1

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.


#2

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!


#3

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


#4

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


#5

Say that again ?



#6

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.

Assign interaction to a class
Specificity in CSS
#7

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.