0

I have some HTML code containing an HTML element with a colon. The span CSS selector styles the element only in Internet Explorer.

I'm unable to change the HTML code and am looking for a way to have IE not target this element with the span selector...

HTML:

<rsi:span>
    <rsi:span>
        <rsi:span>Name </rsi:span>
        <rsi:span>that </rsi:span>
        <rsi:span>tune</rsi:span>
    </rsi:span>                   
</rsi:span>

CSS:

span {
  color: red;
}
Jagger
  • 41
  • 3
  • 7
  • 2
    There is no such element as ``...what exactly are you trying to do – Paulie_D Aug 11 '16 at 18:22
  • I have a 3rd party tool that is injecting these `` tags into the DOM. I'm trying to get IE to not style `` elements with `span {color: red}` – Jagger Aug 11 '16 at 18:25
  • 1
    Are you sure this is HTML and not XML? – BoltClock Aug 11 '16 at 18:27
  • It seems your only option if you can't change the html would be to change your css selector, no? It's hard to imagine how else this question could be answered – aw04 Aug 11 '16 at 18:29

2 Answers2

0

The rsi prefix looks like it's supposed to be a namespace. Does the routine that injects this code also provide an actual namespace URL to go with it?

If you have info like that, stick the namespace info in the start tag for the HTML, and use it also in the CSS.

<!DOCTYPE html>
<!-- use the namespace attribute -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:rsi="(stuff)" xml:lang="en">
 <head>
  <title>Test rsi namespace</title>
  <style>
   @namespace rsi '(stuff)';  /* define same namespace in the CSS */
   span {color:red}           /* your original code here */
   rsi|span {color:inherit}   /* namespaced span needs styles reverted */
  </style>
 </head>

 <body>
  <span>This is a normal span</span>
  <rsi:span>
   <rsi:span>
    <rsi:span>Name </rsi:span>
    <rsi:span>that </rsi:span>
    <rsi:span>tune</rsi:span>
   </rsi:span>                   
  </rsi:span>
 </body>
</html>

As you can see, the syntax for using namespaces is different in the CSS than in the markup. See, for instance, @namespaces - css on MDN.

Edit: Unfortunately, this works in IE only if the file is a real XHTML file. So the snippet here will look like it fails, but if you copy it and paste it in a file with .xhtml for a prefix, it will run as desired.
Firefox and Chrome are good with both HTML or XHTML.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
0

I ended up using the following CSS to prevent IE/Edge from applying span styling to :

span:not(rsi:span) {
    color: red;
}
Jagger
  • 41
  • 3
  • 7