How can I style the headings in a CMS Rich Text field that are also links in Webflow?
TL;DR
- Add a custom class to the Rich Text element (e.g.,
rich-text-style). - Use nested selectors like “All Links inside H2 Headings inside .rich-text-style” to target and style linked headings specifically.
To style headings that are also links inside a CMS Rich Text field in Webflow, you need to use custom selectors within the Rich Text settings. Here's how to do it.
1. Wrap the Rich Text with a Custom Class
- Select your Rich Text element, usually bound to the CMS field.
- Add a class, e.g.,
rich-text-style, to this element. This allows you to target its contents specifically.
2. Use the Selector Dropdown to Target Nested Elements
- Select the Rich Text element with the class applied.
- Click the selector dropdown in the Style panel.
- Scroll to "All H1 Headings inside .rich-text-style" (or H2, H3, etc. depending on your content).
- Click it to create and style a specific heading level.
3. Further Target Headings That Are Links
Webflow doesn’t show this by default in the selector list, so you must manually select a heading inside the Rich Text that contains a link.
- In the CMS Collection Page or a reference page, find the rendered Rich Text field.
- Double-click to enter editing mode, then select a linked heading (e.g., an H2 that’s also an anchor link).
- In the Style panel, you’ll now see a deeper selector like:
All Links inside All H2 Headings inside .rich-text-style. - Click it to style linked headings specifically.
4. Apply Your Styles
- Now with the correct selector active, apply styles like:
- Font weight
- Color
- Text decoration
- Hover styles
These will now apply only to links that are inside heading tags within the specific Rich Text block.
Summary
To style heading links inside a CMS Rich Text field, assign a class to the Rich Text element, then use nested selectors like “All Links inside H2 Headings inside [your class]” to target and style them specifically.