How can I load the new Protostar custom CSS stylesheet last?

Question

I have been using EasyScript to load custom CSS on a website using the Protostar template:

This works well and allows me to override the template styling and also third party extension styling (e.g. AcyMailing, CoalaWeb Social Links and Smart Slider in this particular case) as the custom CSS code is loaded last.

Since Joomla 3.5.0, the Protostar template loads custom CSS code from the file at /templates/protostar/css/user.css, if the file exists.

Unfortunately, the custom CSS is loaded immediately after the Protostar template.css file so I am not able to use this feature to override the third party extension styling:

As I am keen to minimise the number of third party extensions I need to load, how can I make user.css load after the third party extension stylesheets?

Answer 1

One option is to use a stronger selector. With this the position the order of the css doesn't matter.

if you would like to modifiy to orginal css

    .theComponent .theSelector {
    color:red;
    }

use

    html .theComponent .theSelector {
    color:blue;
    }

Answer 2

What is @Pierre suggesting is called CSS Specificity, and is important part in determining which CSS Selector is stronger.

It can be easily calculated with Specificity Calculator, but the strongest selector html he is suggesting, will always work to override previously applied attributes.