Advice on CSS clashes

MathJax leverages CSS in a complex fashion for its layout. This can lead to conflicts with other styling.

This page collects information on CSS issues and how to resolve them.

Changing math styles after the configuration is loaded

At https://groups.google.com/forum/#!topic/mathjax-users/jKmqJJdbqTg, the question was to style the cursor on the SVG output.

As all styling, the most stable way is to go through the output configuration options, e.g., for SVG

<script type="text/x-mathjax-config">
   MathJax.Hub.Config({
     jax: ["input/TeX","input/MathML", "output/SVG"],
     extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js"],
     "SVG": {
         styles: {
            ".MathJax_SVG use": {
                cursor:"move",
            }
         }
     }
   });  
</script>

However, if the CSS needs to change dynamically (in this question: select/unselected), then the MathJax configuration can't help -- it's only processed once. So regular methods have to suffice and those largely depend on how the webapp works internally.

For example, one could create a style for a class that will be used for the selected math (pointer), say .selected, and then use

styles: {
  ".MathJax_SVG": {cursor: "move"},
  ".MathJax_SVG.selected": {cursor: "pointer"}
}

and then add the "selected" class to the .MathJax_SVG element when it is selected. Depending on how clicks are detected, it might be easier to add "selected" to the class of some higher up element (where the detection occurs). In that case, use

styles: {
  ".MathJax_SVG": {cursor: "move"},
  ".selected .MathJax_SVG": {cursor: "pointer"}
}

Watch out for the lack of space in ".MathJax_SVG.selected" and the space in ".selected .MathJax_SVG" -- they are necessary.