snipt

Ctrl+h for KB shortcuts

JavaScript

jQuery selectors

1
2
3
4
5
6
:odd 
:even
:first
:last
:eq(3)
...
https://snipt.net/embed/ffe7249e9d7cdd58de77ca3baacd0e9b/
https://snipt.net/raw/ffe7249e9d7cdd58de77ca3baacd0e9b/
ffe7249e9d7cdd58de77ca3baacd0e9b
js
JavaScript
6
2016-09-13T18:01:34
True
False
False
/api/public/snipt/17759/
jquery-selectors
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="o">:</span><span class="nx">odd</span> </span><span id="L-2"><a name="L-2"></a><span class="o">:</span><span class="nx">even</span> </span><span id="L-3"><a name="L-3"></a><span class="o">:</span><span class="nx">first</span> </span><span id="L-4"><a name="L-4"></a><span class="o">:</span><span class="nx">last</span> </span><span id="L-5"><a name="L-5"></a><span class="o">:</span><span class="nx">eq</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span> </span><span id="L-6"><a name="L-6"></a><span class="p">...</span> </span></pre></div> </td></tr></table>
jquery, selectors

CSS

pseudo-selectors: supported techniques CSS2.01

1
2
3
4
5
6
-Use supported techniques : 

:before
:after 
a[href $='.pdf']  
a[href ^='.pdf']
https://snipt.net/embed/85a064568abd01c887313c8ff03b21b2/
https://snipt.net/raw/85a064568abd01c887313c8ff03b21b2/
85a064568abd01c887313c8ff03b21b2
css
CSS
6
2016-09-26T23:44:09
True
False
False
/api/public/snipt/8126/
pseudo-selectors-supported-techniques-css201
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nt">-Use</span> <span class="nt">supported</span> <span class="nt">techniques</span> <span class="o">:</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nd">:before</span> </span><span id="L-4"><a name="L-4"></a><span class="nd">:after</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">a</span><span class="o">[</span><span class="nt">href</span> <span class="o">$=</span><span class="s1">&#39;.pdf&#39;</span><span class="o">]</span> </span><span id="L-6"><a name="L-6"></a><span class="nt">a</span><span class="o">[</span><span class="nt">href</span> <span class="o">^=</span><span class="s1">&#39;.pdf&#39;</span><span class="o">]</span> </span></pre></div> </td></tr></table>
"conditional css", css2.01, pseudo-selectors, selectors

CSS

CSS Specificity

1
2
3
4
5
6
CSS SPECIFICITY___________________

Elements = 1 points
Classes = 10 points
Identifiers = 100 points
Inline Styling = 1000 points
https://snipt.net/embed/8ccf16f374bd43e5a1920f9ddeb0ac01/
https://snipt.net/raw/8ccf16f374bd43e5a1920f9ddeb0ac01/
8ccf16f374bd43e5a1920f9ddeb0ac01
css
CSS
6
2016-09-18T23:04:08
True
False
False
/api/public/snipt/8119/
css-specificity
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nt">CSS</span> <span class="nt">SPECIFICITY___________________</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nt">Elements</span> <span class="o">=</span> <span class="nt">1</span> <span class="nt">points</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">Classes</span> <span class="o">=</span> <span class="nt">10</span> <span class="nt">points</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">Identifiers</span> <span class="o">=</span> <span class="nt">100</span> <span class="nt">points</span> </span><span id="L-6"><a name="L-6"></a><span class="nt">Inline</span> <span class="nt">Styling</span> <span class="o">=</span> <span class="nt">1000</span> <span class="nt">points</span> </span></pre></div> </td></tr></table>
css, selectors, tricks

CSS

IE6+7 Selectors

* html #selector {property:value;} /* Only IE6 and lower will see this */
*+html #selector {property:value;} /* Only IE7 will see this */
https://snipt.net/embed/946ef512b91b90b3b0a355b6a9aeae8d/
https://snipt.net/raw/946ef512b91b90b3b0a355b6a9aeae8d/
946ef512b91b90b3b0a355b6a9aeae8d
css
CSS
2
2016-09-28T00:44:12
True
False
False
/api/public/snipt/4689/
ie67-selectors
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="o">*</span> <span class="nt">html</span> <span class="nf">#selector</span> <span class="p">{</span><span class="n">property</span><span class="o">:</span><span class="n">value</span><span class="p">;}</span> <span class="c">/* Only IE6 and lower will see this */</span> </span><span id="L-2"><a name="L-2"></a><span class="o">*+</span><span class="nt">html</span> <span class="nf">#selector</span> <span class="p">{</span><span class="n">property</span><span class="o">:</span><span class="n">value</span><span class="p">;}</span> <span class="c">/* Only IE7 will see this */</span> </span></pre></div> </td></tr></table>
css, explorer, ie, internet, selectors
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.