<h2 id="what-is-dizzle">What is Dizzle?</h2>
<p>Dizzle turns CSS selectors into functions that test if elements match them. When searching for elements, testing is executed "from the top", similar to how browsers execute CSS selectors.</p>
<h2 id="why-i-created-this-library-when-jquerysizzle-can-do-the-job">Why I Created this library when jQuery/Sizzle Can do the job?</h2>
<p>Long story short I wanted to move from jQuery to VanillaJS but then I faced a roadblock that I can't use special CSS selectors such as <code>:input</code> in VanillaJS to fetch elements due to which I worked on this library. </p>
<h2 id="features">Features:</h2>
<ul>
<li>Full implementation of CSS 3 &amp; CSS 4 selectors</li>
<li>Partial implementation of jQuery Extensions</li>
<li>Pretty good performance</li>
<li>Light Weight</li>
</ul>
<h3 id="finding-all-input-elements-inside-a-form">Finding All Input Elements Inside A Form</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> $elements = dizzle(<span class="hljs-string">'div#yourID :input'</span>);
<span class="hljs-built_in">console</span>.log($elements);
</code></pre>
<h3 id="filter-elements">Filter Elements</h3>
<pre><code class="lang-javascript"><span class="hljs-comment">/**
 * Filter All Visible H2 tags
 */</span>
<span class="hljs-keyword">var</span> visibleH2 = dizzle.filter(<span class="hljs-string">':visible'</span>,dizzle(<span class="hljs-string">'h2'</span>));
</code></pre>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://github.com/varunsridharan/dizzle">https://github.com/varunsridharan/dizzle</a></div>
<hr />
<p>Questions or feedback?  Please comment below. </p>
<p>See all my projects at <a href="https://github.com/varunsridharan/">Github</a>.</p>
<p>Follow me on <a href="https://twitter.com/varunsridharan2">Twitter for updates</a></p>


## What is Dizzle?

Dizzle turns CSS selectors into functions that test if elements match them. When searching for elements, testing is executed "from the top", similar to how browsers execute CSS selectors.

## Why I Created this library when jQuery/Sizzle Can do the job? 

Long story short I wanted to move from jQuery to VanillaJS but then I faced a roadblock that I can't use special CSS selectors such as `:input` in VanillaJS to fetch elements due to which I worked on this library. 

## Features:

* Full implementation of CSS 3 & CSS 4 selectors
* Partial implementation of jQuery Extensions
* Pretty good performance
* Light Weight

###  Finding All Input Elements Inside A Form 
```javascript
var $elements = dizzle('div#yourID :input');
console.log($elements);
```

###  Filter Elements 
```javascript
/**
 * Filter All Visible H2 tags
 */
var visibleH2 = dizzle.filter(':visible',dizzle('h2'));
```

%[https://github.com/varunsridharan/dizzle]

---

Questions or feedback?  Please comment below. 

See all my projects at <a href=https://github.com/varunsridharan/>Github</a>.

Follow me on <a href="https://twitter.com/varunsridharan2">Twitter for updates</a>

Dizzle - CSS Selector Library

Crazy Developer From India, who has more interest in programming than a main stream academic!
I ❤️ Open Source!
