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>