Limited usability of Cascading Style Sheets (CSS) in Confluence User Macros - any workarounds?
Asked by Ulrik Schoth:

A CSS attribute selector using a string value match (e. g. **a\[href="<https://dummy2.org>"\]** ) or a CSS child combinator (e. g. **div.my-box \> p**) cannot be used in a Confluence User Macro.

This is because Confluence erroneously replaces the symbols used here (double quotes and greater than symbol) by their HTML entities (**\&quot;** and **\&gt;**). As a result, the CSS code does not work.

**Does anyone know a workaround for this, especially for the child combinator?**

*** ** * ** ***

Below are a few details.

**Example:** From this code in a User Macro ...

```
<style>
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
</style>
```

... Confluence generates the following HTML code:

```
<style>
.wiki-content div.my-box &gt; p { font-weight: bold; }
.wiki-content a[href=&quot;https://dummy2.org&quot;] { color: red; }
.my-box {border: 2pt solid black; }
</style>
```

I found out that this bug has already been discussed several times in the Atlassian Community (e. g. [2015](https://community.atlassian.com/t5/Answers-Developer-Questions/How-to-escape-quot-gt-quot-CSS-Child-selector-in-a-user-macro/qaq-p/573882), [2017](https://community.atlassian.com/t5/Confluence-questions/Why-confluence-change-quot-gt-quot-sybol-in-HTML-part-of-page/qaq-p/607178), [2018](https://community.atlassian.com/t5/Confluence-questions/Include-CSS-in-confluence-user-macro/qaq-p/875263), [2020](https://community.atlassian.com/t5/Confluence-questions/Cannot-use-css-selectors-in-user-macro/qaq-p/1353905)) or in Atlassian JAC ([2016](https://jira.atlassian.com/browse/CONFSERVER-40873)), unfortunately without success: At least in version 8.4.5 it is still present.

I haven't given up hope that this bug will actually be fixed one day. But until then, the question is whether there are any workarounds. These are the results I found on the sites mentioned above:

* Using the [HTML macro](https://community.atlassian.com/t5/Answers-Developer-Questions/Re-How-to-escape-quot-gt-quot-CSS-Child-selector-in-a-user-macro/qaq-p/573883/comment-id/111538#M111538). But the use of this macro is sometimes disabled for security reasons.
* A solution using [jQuery](https://community.atlassian.com/t5/Answers-Developer-Questions/Re-How-to-escape-quot-gt-quot-CSS-Child-selector-in-a-user-macro/qaq-p/573884/comment-id/111539#M111539) or vanilla JavaScript also seems to be available. But for a flexible solution, you need the HTML macro. Then you can better use it directly (see above).
* You can save the CSS code in a stylesheet file and include this in the user macro.

My own tests have shown the following:

* I have found out that in the example above the double quotes can be replaced by single quotes. **So this CSS code *is* a solution:** **a\[href='<https://dummy2.org>'\]**
* I had hoped that there was a possibility for the \> symbol to avoid the erroneous substitution by a kind of preceding escape character. Something like  
  **div.my-box \\\> p** Unfortunately, this does not work. **A simple solution for the CSS child combinator is therefore still missing.**


Answers:
author: Ulrik Schoth
body: In the meantime, I have found a solution myself by adding a [CDATA](https://en.wikipedia.org/wiki/CDATA#Use_of_CDATA_in_program_output) section to the CSS code.

**Example:** From this code in a User Macro ...

```
<style>
/* <![CDATA[ */
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
/* ]]> */
</style>
```

... Confluence generates the following HTML code ...

```
<style>
/* <![CDATA[ */
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
/* ]]> */
</style>
```

... which is exactly what we wanted to achieve.

**Explanation**

* The CDATA section prevents the CSS code it contains from being (erroneously) processed by Confluence.
* However, the CDATA section has no effect on the CSS code itself, as both the start sequence **\<!\[CDATA\[** and the end sequence **\]\]\>** are treated as [CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments).

**Summary**

The error in Confluence described above can be circumvented by an additional CDATA section shown below and thus enables the use of any CSS instructions in a Confluence user macro (tested in Confluence Data Center 8.4.5). ?

```
<style>
/* <![CDATA[ */

/* Your CSS code goes here. */

/* ]]> */
</style>
```


Tags: confluence-server

server