<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css pseduo-classes</title>
<style>body{
}
.psd-classes{
list-style-type:none;
}
.psd-classes li{
padding:5px;
margin:20px 0px 0px 5px;
border-radius:3px;
opacity:0.8;
width:90%;
word-break:wrap;
}
.examples div > code{
font-weight:bold;
}
ul li:nth-child(odd){
box-shadow:0px 0px 5px 1px blue;
border-radius:10px;
}
ul li:nth-child(even){
box-shadow:0px 0px 5px 1px orange;
color:black;
border-radius:10px;
}
var{
font-weight:bold;
}
ul.psd-cl-formula li{
box-shadow:none;
}</style>
</head>
<body>
<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>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.