How to Apply a CSS Style to an Element Name

Can I apply a CSS style to an element name?

You can use the attribute selector,

input[name="goButton"] {  background: red;}

<input name="goButton">

Is it possible to apply CSS to an element whose name contains a particular string?

Yes, you can:

input[name*="Description"] {
    width: 200px;
}

DEMO

More info

[attr] 
    Represents an element with an attribute name of attr.
[attr=value]
    Represents an element with an attribute name of attr 
    and whose value is exactly "value".
[attr~=value]
    Represents an element with an attribute name of attr 
    whose value is a whitespace-separated list of words, 
    one of which is exactly "value".
[attr|=value]
    Represents an element with an attribute name of attr. 
    Its value can be exactly “value” or can begin with “value”
    immediately followed by “-” (U+002D). It can be used for 
    language subcode matches.
[attr^=value]
    Represents an element with an attribute name of attr 
    and whose value is prefixed by "value".
[attr$=value]
    Represents an element with an attribute name of attr 
    and whose value is suffixed by "value".
[attr*=value]
    Represents an element with an attribute name of attr 
    and whose value contains at least one occurrence of 
    string "value" as substring.

Source

How can i apply css stylesheet to single specific element?

There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference

Best way to achieve what you want is to use classss. See classes

.red {      color: red;}.blue {      color: blue;}

<label class="blue">    I'm blue</label><label class="red">  I'm red</label>

How to apply different CSS styles to 2 elements with the same class name?

I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:

<nav class='mainnav'><div class="classname one"> Some code </div></nav>

<div class='wrapper'><div class="classname"> Some different code </div></div>

You can easily target these:

.mainnav>.classone {}
.wrapper>.classone {}

Or if the parent html has a class:

<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>

.ancestor1 .classname {}
.ancestor2 .classname {}

Obviously this depends on where in the html they might be.

Apply CSS Style on all elements except with a SPECIFIC ID

Use the :not selector:

div:not(#bar){    color:red;}

<div>foo</div><div id="bar">bar</div>

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

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