• :any()-:matches()

    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(here..).it looks as follow: 

    :any(element) or :any(element, element, element,...)
    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.

    Now :any() class will be combined: 

    :any(element, element) combinator psd-class,element,combination

    example: :any(div,nav) + h1

    this will equal to either div+h1 or nav+h1

    any number of combinations is possibile like:
    div:any(p,span) h1 the relation :inside div either p or span or both have h1 as a descendent.
    :any(nav,article,section,div) :any(nav,artile,menu,a) the relation: whatever matching from second class is a descendent for the matching from first class.
    :any(nav,article,section,div) > :any(nav,artile,menu,a) the relation: whatever matching from second class is a direct child for the matching from first class.

    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 :any will cut hard work of repeating group selectors.it is also prefixed.

  • :not()

    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:

    :not(div)

    will only select the div and any descending element inside the div will not be selected.it targets only one element.

  • nth

    the formula an+b will result in a number when used with psd-selectors that are using it.here n is always a positive integer.a and b are given either positive or negative integers inorder to have the desired range of numbers.for instance:

    :nth-child(n+7)

    n above starts at 0 the result will be 6.then n 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,...).

    code like this one: li:nth-child(4){} means:

    element li that is the 4th child of it's parent.

    Ranges:

    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.

    li:nth-child(n+5):nth-child(-n+9)

    the red part will select elements starting index 5 forward.the blue part will select elements starting index 9 and backwards(see n 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.

    More customized ranges:

    example above could be further filtered to select for example only odd indexes or whatever formula desired from the customized range like so:

    li:nth-child(n+3):nth-child(-n+12):nth-child(odd)

    psd-classes:

    the following psd-classes use the an+b formula:
    • :nth-child()
    • :nth-last-child()
    • :nth-of-type()
    • :nth-last-of-type()