Affect any element with a combo class from an Interaction

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