selecting a class having a specific class in CSS

Question

<math>
 <mfrac class="mfrac_class">
<mstyle class="num_class">
  <mrow>
    <mn>1</mn>
    <mi>a</mi>
  </mrow>
</mstyle>
<mstyle class="den_class">
  <mrow>
    <mi>x</mi>
  </mrow>
</mstyle>
</mfrac>
<mfrac class="mfrac_class">
<mstyle class="num_class">
  <mrow>
    <mn>2</mn>
    <mtext class="mtext_class">b</mtext>
  </mrow>
</mstyle>
<mstyle class="den_class">
  <mrow>
    <mn>3</mn>
    <mtext class="mtext_class">c</mtext>
  </mrow>
    </mstyle>
  </mfrac>
</math>

I want to apply separate styles for num_class and num_class having mtext_class. I know how to do this in JQuery, but I need any better solution in CSS.

Do not confuse this as invalid HTML, this is Mathml, a part of HTML.

---

Concluded there is no solution for this in CSS, has to work on in JQuery

Answer 1

Just noticed that you want to target the parent element based on child class combination which is not possible using CSS alone, You can use jQuery .parent() or .closest() with .has() to achieve that...

$('ul.num_class').has('li.mtext_class').closest('ul.num_class').css({
    'border':'1px solid #f00'
});

Demo