Buy me a coffee

Styling Specific Text in Accordion

#1. Non-clickable text

First, you need to find the Accordion Block ID. Use below tool.

In my example, we will have:

  • #block-yui_3_17_2_1_1722935850341_3420

Styling Specific Text In Accordion 01 Min

Next, suppose you need to change the style of 2 texts, you can highlight them > click the link icon

Styling Specific Text In Accordion 02 Min

and add link: #text01, #text2.

Styling Specific Text In Accordion 03 Min

Styling Specific Text In Accordion 04 Min

make sure the option “Open link in New Tab” is disabled.

You will have:

Styling Specific Text In Accordion 05 Min

Next, use this code to Custom CSS box

#block-yui_3_17_2_1_1722935850341_3420 {
[href="#text01"] {
text-decoration: none !important;
color: #f1f;
font-size: 50px;
pointer-events: none;
}
[href="#text2"] {
text-decoration: none !important;
color: yellow;
font-size: 15px;
position: relative;
top: -20px;
pointer-events: none;
}}

Styling Specific Text In Accordion 06 Min

Result:

Styling Specific Text In Accordion 07 Min

#2. Clickable Text

Suppose you added this link to the text:

Styling Specific Text In Accordion 08 Min

and you need to make it a different style, then use this CSS code

#block-yui_3_17_2_1_1722935850341_3420 a[href="/contact"] {
color: red;
font-size: 30px;
font-family: monospace;
}

Styling Specific Text In Accordion 09 Min

Result:

Styling Specific Text In Accordion 10 Min