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.,
article-body). - On a static page, insert sample content and select the heading link to style using a combo selector like
.article-body h2 a, then apply your desired styles. - Publish the site to apply these styles across all CMS Rich Text content.
To style headings inside a CMS Rich Text field that are also links, you need to use Rich Text custom classes and nested tag targeting in Webflow.
1. Add a Custom Class to the Rich Text Element
- Click the Rich Text element connected to your CMS.
- In the Style panel, give it a custom class (e.g.,
article-body). - This class will be the parent for styling nested elements using combo selectors.
2. Apply Styles to Headings That Are Links
- Select the Rich Text block on a static page (don’t try this in the CMS Template directly).
- Paste or add sample rich text content that includes a heading with a link (e.g., an H2 with an anchor inside).
- Click the link text inside the heading to select it.
- In the selector dropdown, Webflow will show something like:
.article-body h2 a
- Style it as needed: font, color, hover state, underline, etc.
3. Ensure Styles Are Saved and Publish
- Once you've styled your desired heading+link combinations (e.g., H1 a, H2 a, etc.), Webflow will store those combo classes.
- When you publish the site, all CMS items with this structure in the Rich Text field will reflect your styles.
Summary
Add a custom class to your Rich Text block, then use nested style selectors (e.g., .your-class h2 a) to target and style linked headings within the CMS content. This ensures consistent design even within dynamic Rich Text elements.