<!doctype html>
<html>
  <head>
    <title>Token elements - dynamic changes</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      #styled > mo { color: red; }
      #styled > mi { color: green; }
      #styled > mi ~ * { color: blue; }
    </style>
  </head>
  <body>

    <!-- Test 1 -->
    <p style="display: none;">
      <math><mi>sin</mi><mi>x</mi></math>
      <math><mi>cos</mi><mi>y</mi></math>
      <math><mi>tan</mi><mi>z</mi></math>
    </p>

    <!-- Test 2 -->
    <p>
      <math><mn>1</mn><mo>+</mo><mn>2</mn><mo>−</mo><mn>3</mn></math>
      <math><mo>(</mo><msqrt><mfrac><mn>4</mn><mn>5</mn></mfrac></msqrt><mo>]</mo></math>
      <math><mo>+</mo><mo>{</mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
    </p>

    <!-- Test 3 -->
    <p>
      <math><mi mathvariant="bold">x</mi></math>
      <math><mi mathvariant="italic">sin</mi></math>
      <math><mi>x</mi></math>
      <math><mi>sin</mi></math>
    </p>

    <!-- Test 4 -->
    <p>
      <math><mo stretchy="false">{</mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
      <math><mo>{</mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
    </p>
    
    <!-- Test 5 -->
    <p>
      <math id="styled"><mo>-</mo><mi>sin</mi><mi>x</mi></math>
    </p>

  </body>
</html>
