CSS Selectors and Pseudo Selectors Helper

Important Selectors which might not be the most popular selectors, but make your like 100 times easier:

Selector Explanation Example
::after / ::before  prepends / appends a new element with the given content.  p::after { content: ‘This comes after’; }
+  for immediate adjacent sibling  p + p { } // 2 p’s next to each other
~  selects all sibling after of the given class within the same element  img ~ p { } // all p’s after img
>  child element – for first descendent children only  ul > li { } //only li’s directly under ul
::first-letter  selects the first letter of an element only  p::first-letter { font-size: 20px; }
::first-line  selects first line of an element. (won’t work on display:inline)  p::first-line { color: red; }
:first-child

:last-child

:nth-child

 selects any first child of an element

selects any last child of an element

selects the given child by position in an element

 p:first-child { color: red; }

p:last-child { color: green; }

p:nth-child(2) { color: blue; }

:first-of-type

:last-of-type

:nth-of-type

:nth-last-of-type

 selects first child of a specific type in an element

selects last child of a specific type in an element

selects  the given child by position of a specific type in an element

selects  the given child by position from bottom of a specific type in an element

 p:first-of-type { color: blue; } //1st of type p

p:last-of-type { color: navy; } //last of type p

p:nth-of-type(2) { color: navy; } //2nd from top

p:nth-last-of-type(2) { color: black; } //2nd from last

:in-range /

:out-of-range

 for input type range, can be used as a validator  input:in-range { border: 1px solid green; }

input:out-of-range { border: 1px solid red;}

:invalid  used for validations when using the required attribute to denote an error input:invalid { border: 1px solid red; }
:valid  used for validations when using the required attribute to denote valid  input:invalid { border: 1px solid green; }
:matches  groups by selectors  :matches(nav, div) h1 { color: red; }

:matches(nav, div) :matches(h2,h3) { color: green; }

:not(x)  selects all except given type or class  p:not(span) { font-size: 14px; } //span wouldn’t be 14px
:only-child  if the type given is the only child in the element  div p:only-child { color: red; } //if p is the only child in div
:required  indicated a required field when the required attribute is present  label:required { border: 1px solid red; }
:target  matched the hash in the url and the id of the element  http://example.com/#games

<div id=”games”></div>

#games { display: none;}

#games:target { display: block;}

 *  universal selector refers to all elements and types  *{ margin: 0px; }