attribute start with vs other selectors

Benchmark created on December 18, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>
  HTML Ipsum Presents
</h1>

<p>
  <div class="div-class">
    <input id="input-id-0" value="test" class="test-1 test-2" /> 
  </div>
  <strong>
    Pellentesque habitant morbi tristique
  </strong>
  senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
  egestas semper.
  <em>
    Aenean ultricies mi vitae est.
  </em>
  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  Vestibulum erat wisi, condimentum sed,
  <code>
    commodo vitae
  </code>
  , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
  ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  <a href="#">Donec non enim</a>
  in turpis pulvinar facilisis. Ut felis.
</p>

<h2>
  Header Level 2
</h2>
<ol>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ol>
<p>
  <strong>
    Pellentesque habitant morbi tristique
  </strong>
  senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
  egestas semper.
  <em>
    Aenean ultricies mi vitae est.
  </em>
  <div class="div-class">
    <input id="input-id-1" value="test" class="test-1 test-2" /> 
  </div>
  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  Vestibulum erat wisi, condimentum sed,
  <code>
    commodo vitae
  </code>
  , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
  ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  <a href="#">Donec non enim</a>
  in turpis pulvinar facilisis. Ut felis.
</p>

<h3>
  Header Level 3
</h3>
<ul>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div class="div-class">
      <input id="input-id-2" value="test" class="test-1 test-2" /> 
    </div>
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ul>
<pre>
  <code>
    #header h1 a { display: block; width: 300px; height: 80px; }
  </code>
</pre>

<h3>
  Header Level 4
</h3>
<ul>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div class="div-class">
      <input id="input-id-3" value="test" class="test-1 test-2" /> 
    </div>
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ul>
<pre>
  <code>
    #header h1 a { display: block; width: 300px; height: 80px; }
  </code>
</pre>

<h3>
  Header Level 5
</h3>
<ul>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div class="div-class">
      <input id="input-id-4" value="test" class="test-1 test-2" /> 
    </div>
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
 <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ul>
<pre>
  <code>
    #header h1 a { display: block; width: 300px; height: 80px; }
  </code>
</pre>

Test runner

$('.div-class [id^="input-id-"]').removeClass("test-2").val("");

$('[id^="input-id-"]').removeClass("test-2").val("");

$('input').removeClass("test-2").val("");

$('.test-1').removeClass("test-2").val("");

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on December 18, 2013