Search code examples
csslessmediawikimediawiki-templates

How to refer to an id with special characters in CSS

I’m working on a MediaWiki skin that will be released to the public for anyone to use for free, but there is something that is keeping me from wrapping up the project. Here is the issue.

There is a list that is dynamically generated by MediaWiki (not by the skin, so I have no control over this) and it assigns each <li> and id equal to the page name it represents. Now languages other than English have special characters which may show up in these page titles, for example “Página Aleatoria”. For this page I see an id is set replacing the accented character for some code, something that looks like this <li id="P.C3.A1gina-aleatoria">.

Now the question is how do I refer to this id in CSS? I have tried #P.C3.A1gina-aleatoria, #página-aleatoria and #pagina-aleatoria but none of those seem to work.

Any ideas? Thanks in advance!

Solution

  • Try this, you can use "\" to escape special characters in CSS like other languages

    #P\.C3\.A1gina-aleatoria { }

    Also you can try attribute selectors like

    li[id="P.C3.A1gina-aleatoria"] {}

    Check this fiddle