Colon's in HTML Class names

[wesruv]

TL;DR

Colon's are getting in class names, from what I can see, I don't think it's not valid HTML (see section 4.1.3).

But I can definitely say it's difficult to apply CSS styles to, and it's extremely difficult or impossible to select something : in the selector with JS queries.

As a front-end nerd, I'd suggest converting the : to __ (double underscore) or _ (single underscore). I think that'd make the part before and after the colon read separately, which I feel is the point of a : in the naming.

---

Long version

On the project I'm working on we've decided to use AsciiDoc Roles to denote certain important elements that need to be handled in a special way.

In this case we have an "Additional Resources" section, for content the reader might want to also read, the syntax we're using is something like this:

[role="system:additional-resources"]
.Additional resources

* link:https://access.redhat.com/articles/3131341[Support Policies for RHEL High Availability Clusters - Microsoft Azure Virtual Machines as Cluster Members]
* link:https://access.redhat.com/articles/3071021[Support Policies for RHEL High Availability clusters - Transport Protocols]
* link:https://cloud.google.com/vpc/docs/vpc[VPC network overview]

It outputs this:

<div class="ulist system:additional-resources">
  <h3 id="ulist_heading_0">Related content</h3>
  <ul aria-labelledby="ulist_heading_0">
    <li>
      <p><a href="https://access.redhat.com/articles/3131341">Support Policies for RHEL High Availability Clusters - Microsoft Azure Virtual Machines as Cluster Members</a></p>
    </li>
    <li>
      <p><a href="https://access.redhat.com/articles/3071021">Support Policies for RHEL High Availability clusters - Transport Protocols</a></p>
    </li>
    <li>
      <p><a href="https://cloud.google.com/vpc/docs/vpc">VPC network overview</a></p>
    </li>
  </ul>
</div>

I figured out I can style it with CSS if I escape the colon with a \, which I've never seen or heard of in my 17 years of writing CSS 😂

e.g.

.system\:additional-resources { /* Styles here */ }

I can't figure out a way to select it with JS, everything I've tried throws the error:

Uncaught DOMException: Failed to execute 'querySelector' on 'DocumentFragment': '.system:additional-resources' is not a valid selector.

In JS I've tried selecting with all of these and it throws the error:

• .system:additional-resources
• .system\:additional-resources
• [class*=system:additional-resources]
• [class*=system\:additional-resources]

[MasterOdin]

Are you using asciidoc-py to do this, or using asciidoctor? If its the latter, I would recommend filing this bug report on their issue tracker.

[wesruv]

We're using asciidoctor, I'll get it filed over there, thanks!