CSS Pseudo Classes && Elements Cheatsheet

CSS Pseudo Classes

Pseudo-classes select elements that already exist.

Based on current state of UI
:hover          - an element is hovered
:enabled        - an element is eanabled
:disabled       - an element is disabled
:checked        - an element is checked

:visited
:active
:focus
:link
:lang
:target

Example
input[type=checkbox]:checked + label {
  color: red;
}
this will change the color of a label to red, when an input of type checkbox is checked

From pseudo class include

:valid
:invalid
:required
:optional
:in-range
:out-of-range               - input can have a max and min attribute. this can be used to change state based on those values
:read-only
:read-write
:default

Example: given the following piece of form input code

<input type="number" min="5" max="7" required aria-required="true"/>
<input type="number" min="0" step="0.1" max="10"/>

input:valid { border: 1px solid green;}
input:invalid { border: 1px solid red;}
input:required,
input[aria-required="true"] {border-width: 5px;}
input:optional {border-width: 10px;}
input:out-of-range { background-color: pink;}
input:in-range { background-color:lightgreen;}

checkout: http://estelle.github.io/selectors/#slide24
playground: http://estelle.github.io/selectors/#slide25


Structural Selectors

Target elements on the page based on their relationships to other elements in the DOM.

E=Element or parent container. if nothing is specified body will be used as a parent.

E:nth-child()

E:nth-last-child()

E:nth-of-type()

E:nth-last-of-type()

E:first-child*

E:last-child

E:first-of-type

E:last-of-type

E:only-child

E:only-of-type

E:root                      - selects the root, which is html is E is not specified

E:empty

E:not(:empty)


:nth-of-type(even)        - here even is 2n
:nth-of-type(odd)         - here odd is 2n + 1
:nth-of-type(an+b)        - for example 3n-1. go to the third and them up by one.

Note: An + B              - to find out which element will get styled first n = 0. for 3n+12, the 12th element will be frist.

NEGATION PSEUDO ELEMENT

:not

example:
div:not(.excludeMe)       - match all divs that dont have a class of .excludeMe

div:not([title])          - match all divs that dont have a title attribute
div:not(:nth-of-type(3))  - match all divs expect the 3rd one
div:not(#id)              - match all divs that dont have an id of id


EMPTY

:empty                    - for example p:empty will find all empty p elements. or div:empty all empty divs




CSS Pseudo Elements

Pseudo-elements create "faux" elements you can style.


::first-line
::first-letter              - http://estelle.github.io/selectors/#slide54
::before
::after

We however have to use one colon (:) because of IE. 

:selection                  - what happens when an element, say a P is selected. its like a highlighted text selection color

Thank u! 👍

thanks for sharing this...

welcome @quielLovesLasagna and @sina-yeganeh :-)