0

Hi Here I am using three external links on head section in that one css link has commented that css link I am trying to calling after document ready.

Here my question is I have some same class names in head CSS link and link which I am calling through Jquery also. But while running the code if its same common class name in head and Query link, then its applying head styles and it's not overriding the CSS class which I am calling through Query. If its unique class name then that styles applying. I want to load CSS which is getting through Query with override head link common class name.

SAMPLE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title> 

<link rel="stylesheet" type="text/css" href="..New folder\layout.css"> 
<link rel="stylesheet" type="text/css" href="..New folder\bootstrapfile.css">
<!--<link rel="stylesheet" type="text/css" href="..New folder\externalfile.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
            var LoadCss = function(cssFile){
                alert('Loading css file '+cssFile);
                //console.log('Loading css file '+cssFile);
                var cssLink = document.createElement('link');
                cssLink.rel = 'stylesheet';
                cssLink.href = '../'+cssFile;
                var head = document.getElementsByTagName('head')[0];
                head.parentNode.insertBefore(cssLink, head);
            };
            
                $(document).ready(function(){
                    LoadCss('New folder/externalfile.css');
                });
            </script>
</head>
<body>


  <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>
Nani
  • 7
  • 2
  • Does this answer your question? [In which order do CSS stylesheets override?](https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override) – Ramon de Vries Nov 18 '21 at 08:19
  • Without changing anything in css level i need to run because i will effect other pages if we change anything in css level – Nani Nov 18 '21 at 08:42
  • If you want the jQuery loaded stylesheet to be the "main" stylesheet. make sure it loads after the other 2 stylesheets are loaded. devtools network tab can help you find out how long it takes to load each sheet and therefor give you a indication howlong to delay loading the externalfile.css – Ramon de Vries Nov 18 '21 at 08:53
  • *how long to delay loading* - you should never delay loading by a set time. If your user is on high speed connection (or has the file cached...) then they will have to wait longer than needed. If they're on a *very* slow connection then it may "load" too soon. Having said that, there doesn't appear to be any delayed loading here and css files are parsed in order. – freedomn-m Nov 18 '21 at 09:12
  • There's no real difference between adding your 3rd script after your other 2 and loading via a script. It's not *so much* the order they load as the *specificity*. So while you think you have an "override", you probably don't as bootstrap particularly has a lot of specificity in its styles. If your css has *exactly* the same rules and *all* of them for a particular element, then loading it last will override. – freedomn-m Nov 18 '21 at 09:36
  • Try to create a *minimal* snippet - i.e. just the `table` and the relevant css from bootstrap/your file in the snippet css. See [mcve]. If you find it difficult to reproduce in the snippet (as in *"it works in the snippet"*) then you've not found *all* the places that are applying css to your table from bootstrap - and that's your issue. Be sure to use the browser dev tools to locate all of the css that's applied. – freedomn-m Nov 18 '21 at 09:37

0 Answers0