Colons in CSS selectors

While doing some additional stylesheet work in Sass on our Customer Community, I ran into an interesting case. One of the selector paths that I needed to rely for the slide-out menu had a custom element - li:community-navigation. I've never run into a colon inside of a path that wasn't tied to a pseudoclass.

A quick Google search revealed a few StackOverflow answers (this one being the most helpful) and a few possible solutions:

• Use a \ to escape the colon
• Use the correct hexadecimal code to escape the colon (\3A)

Of those fixes, just using the backslash didn't seem to have any effect. The character code worked great though, despite looking fairly awkward. The resulting selector was:

...
div > div.lia-quilt-row.lia-quilt-row-main > div > div > li\3A community-naviation > ul {
...

It looks odd inside the stylesheets, but when the Sass is compiled down to CSS and parsed by the browser, it correctly handles the colon and allows the path selector to be valid.