How to apply external CSS to a specific element. Style of other element should not be change

I am using slider. Which gaves two o/p one is minimum value and second is max value. But for this slider I have to use external CSS and JavaScript file. Which change the style of my other elements. I want to apply this CSS on my slider only. What should I do?

Solution

You can try checking how are the elements class called and you can change it in the <head></head> using the <style></style>.

E.G.

If you right click with your mouse on the element and select the option "Inspect element" it will guide you to the right element names and from than on you can change the their style in the style property of the <head>.

This code gives you an example ho to change the background of the slider:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

   <style>
   .ui-slider-bg{
       background: #000000 !important;
   }
  .ui-bar-inherit{
       background: #FFFFFF !important;
   }
  .ui-btn.ui-slider-handle{
       background: #FF0000 !important;
   }

  </style>


  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

    <div data-role="page">
       <div data-role="header">
         <h1>Range Slider</h1>
       </div>

    <div data-role="main" class="ui-content">
      <form method="post" action="/action_page_post.php">
         <div data-role="rangeslider">
           <label for="price-min">Price:</label>
           <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000" >
           <label for="price-max">Price:</label>
           <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
         </div>
         <input type="submit" data-inline="true" value="Submit">
         <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
       </form>
     </div>
  </div> 

</body>
</html>

Using the !important is going to force the elements to change their style.

I hope I helped at least a bit :)

Best regards, Dimitar georgiev