-1

I have a web app with the following markup (roughly)

<div class="v-application">
<pre>
<code class="hljs">
class TreeNode {
  int val;
  TreeNode left;
  TreeNode right;

  TreeNode(int x) {
      val = x;
  }
}
</code>
</pre>
</div>

The v-application class comes from a framework I am using: vuetifyjs. Its css (which I have no control over; framework's globally loaded css) is:

.v-application code {
some css
}

hljs has its own css which is loaded from an external css file that I explicitly include in my page's head by attending to head using custom javascript.

Unfortunately, the v-applicaton code css is overriding the hljs css. How do I provide higher precedence to the external stylesheet file that has the css for hljs class? Any pointers are appreciated.

Edit:

The question marked as "duplicate" does not address how one might provide higher precedence to an external stylesheet specially when it is actually being loaded after the css that is currently taking precedence. If further clarity or detail is needed on my question, I am happy to provide it.

Edit - Worked around the problem:

Using a div with hljs class instead of the code element.

Manas
  • 521
  • 8
  • 26
  • If the specificity is equal, then the css file you want loaded last will overwrite. Else just make the class you're having an issue with higher in specificity. – Keith Sep 06 '19 at 20:42

1 Answers1

2

Just use a more specific selector, example:

.v-application code.hljs { ...some css }
BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16