CSS Selectors

css-selectors.md

CSS Selectors

Simple

• * all elements
• div - all div tags
• div,p - all div's and paragraphs
• div p - paragraphs inside div's
• div > p - all p tags, one level deep in div
• div + p - p tags immediately after div
• div - p - p tags immediately after div
• div ~ p - p tags preceded by div
• .classname - all elements with class
• #idname - element with ID
• div.classname - divs with certain classname
• div#idname - div with certain ID
• #idname * - all elements inside #idname

Pseudo classes

• a:link - link in normal state
• a:active - link in clicked state
• a:hover - link with mouse over it
• a:visited - visited link
• p::after{content:"yo";} - add content after p
• p::before - add content before p
• input:checked - checked inputs
• input:disabled - disabled inputs
• input:enabled - enabled inputs
• input:focus - input has focus
• input:in-range - value in range
• input:out-of-range - input value out of range
• input:valid - input with valid value
• input:invalid - input with invalid value
• input:optional - no required attribute
• input:required - input with required attribute
• input:read-only - with readonly attribute
• input:read-write - no readonly attrib.
• div:empty - element with no children
• p::first-letter - first letter in p
• p::first-line - first line in p
• p:first-of-type - first of some type
• p:last-of-type - last of some type
• p:lang(en) - p with en language attribute
• :not(span) - element that's not a span
• p:first-child - first child of its parent
• p:last-child - last child of its parent
• p:nth-child(2) - second child of its parent
• p:nth-child(3n+1) - nth-child (an + b) formula
• p:nth-last-child(2) - second child from behind
• p:nth-of-type(2) - second p of its parent
• p:nth-last-of-type(2) - ...from behind
• p:only-of-type - unique of its parent
• p:only-child - only child of its parent
• :root - documents root element
• ::selection - portion selected by user
• :target - highlight active anchor

Attribute selectors

• a[target] - links with a target attribute
• a[target="_blank"] - links which open in new tab
• [title~="chair"] - title element containing a word
• [class^="chair"] - class starts with chair
• [class|="chair"] - class starts with the chair word
• [class*="chair"] - class contains chair
• [class$="chair"] - class ends with chair
• input[type="button"] - specified input type