css pseudo-classes

<ul class="psd-classes"> <li> <div> <h2>:any()-:matches()</h2> <p>think about this psd-class as it's near future name (matches) will be.it will only match one or more elements inside the closing brackets :any(<i style="color:black;">here..</i>).it looks as follow: <p> <pre>:any(<code>element</code>) or :any(<code>element, element, element,...)</code></pre> the class will match one or moew elements.the first class above will be equal to element and the second will be qual to whatever matching number of elements. </p> <p>Now <code>:any()</code> class will be combined: <p><pre>:any(element, element) <b>combinator</b> psd-class,element,combination</code></pre></p> <p> example: <code>:any(div,nav) + h1</code> </p> this will equal to either <code>div+h1 or nav+h1</code> </p> any number of combinations is possibile like: <section class="examples"> <div><code>div:any(p,span) h1 <span style="color:blue"> the relation :inside div either p or span or both have h1 as a descendent.</span></code></div> <div><code>:any(nav,article,section,div) :any(nav,artile,menu,a)<span style="color:blue"> the relation: whatever matching from second class is a descendent for the matching from first class.</span></code></div> <div><code>:any(nav,article,section,div) > :any(nav,artile,menu,a)<span style="color:blue"> the relation: whatever matching from second class is a direct child for the matching from first class.</span></code></div> </section> </p> <aside>the secret is :any() will match an element(s).it will be equvilant to an element or elements and that's it.a main use case is this <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:any">:any will cut hard work of repeating group selectors</a>.it is also prefixed.</aside> </div> </li> <li> <div> <h1>:not()</h1> <p>will select any argument but the one inside ()-select everything but not the one inside the ().this psd-class will select only one element X inside (X).so for instance: <p> <code>:not(div)</code> </p>will only select the <code>div</code> and any descending element inside the <code>div</code> will not be selected.it targets only one element.</p> </div> </li> <li><h1>nth</h1> the formula <var>an+b</var> will result in a number when used with psd-selectors that are using it.here <var>n</var> is always a positive integer.<var>a</var> and <var>b</var> are given either positive or negative integers inorder to have the desired range of numbers.for instance: <p><code>:nth-child(n+7)</code></p> <p><var>n</var> above starts at 0 the result will be 6.then <var>n</var> will be 1 and the result will be 7.that means this selector will select children starting the 7th forward (eg.6,7,8,9,10,...).</p> code like this one: <code>li:nth-child(4){}</code> means: <p><i>element <code>li</code> that is the 4th child of it's parent.</i></p></p> <p> <h4>Ranges:</h4> above was selecting a element starting one certain index(eg.4th child).below is how to stop selecting children at a certain index and building a custom range. <p><code style="color:red;">li:nth-child(n+5)</code>:<code style="color:blue">nth-child(-n+9)</code></p> <p>the red part will select elements starting index 5 forward.the blue part will select elements starting index 9 and backwards(see <b><var>n</var></b> is negative).now,whatever is selected from the first part is now being tested with the second psd-class(blue part) to see if it is actually matches it's formula selection.are the elements starting index 5 up also elements inside index 9 down.if yes they will be selected.this way a custom range is built. <p><h4>More customized ranges:</h4> example above could be further filtered to select for example only <var>odd</var> indexes or whatever formula desired from the customized range like so: <p><code style="color:red;">li:nth-child(n+3)</code>:<code style="color:blue;">nth-child(-n+12)</code>:<code style="color:green;">nth-child(odd)</code></p> </p> </p> <p><h4>psd-classes:</h4> the following psd-classes use the <var>an+b</var> formula: <ul class="psd-cl-formula"> <li>:nth-child()</li> <li>:nth-last-child()</li> <li>:nth-of-type()</li> <li>:nth-last-of-type()</li> </ul></p> </p> </li> </ul>