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 (" and >). 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 > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { 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, 2017, 2018, 2020) or in Atlassian JAC (2016), 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. But the use of this macro is sometimes disabled for security reasons.
- A solution using jQuery 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.
