Trying To Style Multiple Expand Macros Using CSS Style Sheet Adaptavist

[Bhréin Brannick]

Hi there,

I have multiple Expand macros on confluence that render different content. Detail below

<Click Me To See Test Scenarios>

<Click Me To See Customer Issues>

<ETC>

I want to style them slightly differently using this module https://www.adaptavist.com/doco/display/CFP/Style+Sheet

However, I'm unable to uniquely target different expand modules as the html is pretty much the same plus the IDs generated are dynamic, see below

<div id="expander-1827806837" class="expand-container">
<div id="expander-control-1827806837" class="expand-control">
<span class="expand-control-icon icon">&nbsp;</span>
<span class="expand-control-text">Click Me To See Test Scenarios</span>
</div>
<div id="expander-content-1827806837" class="expand-content expand-hidden">
<p><br></p>
</div>
</div>

Any ideas on how to get me around this? Thanks in advance.

[Zak Laughton]

Hi Bhréin,

If the expand macros stay in a certain order, and you know the order, you can use the :nth-of-type pseudo-class. If this doesn't fit your use case, you might find another pseudo-class useful. Here's a full list of all the pseudo-classes: Pseudo-classes and pseudo-elements.

I hope this helps!
– Zak