This is the sample code for loading the css file with jQuery
var url = window.location.href; if(url.match('air-fryer-all') !== null ){ /* when it's recipe list */ cssURL = "/recipe_list.css"; LoadCSS(cssURL); function LoadCSS( cssURL ) { // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css return new Promise( function( resolve, reject ) { var link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.href = cssURL; document.head.appendChild( link ); link.onload = function() { resolve(); console.log( 'Recipe List CSS has loaded!' ); }; } ); } } else { /* when it's just normal list.html */ } LoadCSS( cssURL ).then( function() { console.log( 'Another function is triggered after CSS had been loaded.' ); return DoAfterCSSHasLoaded(); } );
When you’re using this, you can add the css in different condition .