title: CSS Output in Firefox and Chrome explained? [id^="exlidInput_scope"]
body: <p>Google Chromes developer tools and Firebug both display the CSS on one of the ID's that I'm trying to manipulate as follows: </p>
  
  <pre><code>[id^="exlidInput_scope"]
  </code></pre>
  
  <p>The line of code is as follows: </p>
  
  <pre><code>&lt;select name="vl(3UI0)" id="exlidInput_scope_1" class="EXLSelectTag blue     EXLSimpleSearchSelect" style="margin-top: -22px; border: 1px solid purple;"&gt;...&lt;/select&gt;
  </code></pre>
  
  <p>I want to manipulate it in jquery doing something like this: </p>
  
  <pre><code>$("[id^="exlidInput_scope"]").css({ 'margin-left': '5px !important'});
  </code></pre>
  
  <p>However I don't really understand the markup that's being used. So the id obviously refers to the fact that its an id however what is this part for? Do I need to reference it like that, or is that something that the browser does just to output it to me? </p>
  
  <pre><code>^=
  </code></pre>
  
  <p>Any help appreciated - I'm new to CSS and not understanding this is a real pain! </p>