Bootstrap 2 bug? [class*="span"] weird issue

Question

After 3 hours digging I finally found the cause of a weird issue I'm having with a Wordpress theme.

Whenever I add a tag to an article that contains the word "span" (e.g Espana), it breaks the layout.

Wordpress adds the class to the article "tag-espana" as expected, although Bootstrap stylesheet applies some rules to it, ruining the layout.

This should be caused by the following selector which is extensively used in Bootstrap 2:

[class*="span"]

Is this a known bug? I couldn't find any info about this so I have some doubts. Any idea on how could I fix this without editing bootstrap source files?

Thanks

Answer 1

Nobody expects the spanish inquisition

Yes, that seems like a bug with this selector. You could modify it by adding a restriction:

[class*="span"]:not([class*="tag-"])

or

[class*="span"]:not([class*="espana"])

but that won't be understood by IE7 and IE8 (if TB2 is compatible with IE7 in the first place, can't remember)

It would be better to override systematically:

[class*="span"] {
  property: value-in-TB2;
}
[class*="espana"] {
  property: nope-override;
}

but as you wrote, it may be used too much by TB2 to be possible to do that...

Or see how your tag-espana elements are styled and override everything that isn't wanted.