CSS Cheat Sheet

Selectors

·         .class

Selects all elements with .class

·         #id

Selects all elements with #id

·         *

Selects all elements

·         div

Selects all <div> elements

·         div, p

Selects all <div> and <p> elements

·         div > p

Selects all <p> elements that are a direct descendant of a <div> element

·         div + p

Selects all <p> elements that are the next sibling of (i.e. placed directly after) <div> elements

·         div ~ p

Selects all <p> elements that follow, and are siblings of, <div> elements

Attributes

·         [attribute]

Selects all elements with the specified attribute

·         [attribute=value]

Selects all elements where the specified attribute is equal to 'value'

·         [attribute~=value]

Selects all elements with an attribute containing the word 'value'

·         [attribute|=value]

Selects all elements with an attribute list starting with 'value'

·         [attribute^=value]

Selects all elements with an attribute beginning with 'value'

·         [attribute$=value]

Selects all elements with an attribute ending with 'value'

·         [attribute*=value]

Selects all elements with an attribute containing the substring 'value'

Pseudo-classes

·         a:link

Selects all unvisited links

·         a:visited

Selects all visited links

·         a:hover

Selects links on mouse hover

·         a:active

Selects the active link element

·         p::after

Insert content after <p> element

·         p::before

Insert content before <p> element

·         input:checked

Selects every checked <input> element

·         input:disabled

Selects every disabled <input> element

·         p:empty

Selects every <p> element with no children

·         input:enabled

Selects every enabled <input> element

·         p:first-child

Selects every <p> element that is the first child of its parent

·         p::first-letter

Selects the first letter of every <p> element

·         p::first-line

Selects the first line of every <p> element

·         p:first-of-type

Selects every <p> element that is the first <p> element of its parent

·         input:focus

Selects the <input> element which has focus

·         input:in-range

Selects <input> elements with a value within a specified range

·         input:invalid

Selects all <input> elements with an invalid value

·         p:lang(language)

Selects all <p> elements with a lang attribute equal to 'language'

·         p:last-child

Selects every <p> element which is the last child of its parent

·         p:last-of-type

Selects every <p> element which is the last <p> element of its parent

·         :not(p)

Selects every element that is not a <p>

·         p:nth-child(2)

Selects every <p> element that is the second child of its parent

·         p:nth-last-child(2)

Selects every <p> element that is the second child of its parent, counting from the last child

·         p:nth-last-of-type(2)

Selects every <p> element that is the second <p> element of its parent, counting from the last child

·         p:nth-of-type(2)

Selects every <p> element that is the second <p> element of its parent

·         p:only-of-type

Selects every <p> element that is the only <p> element of its parent

·         p:only-child

Selects every <p> element that is the only child of its parent

·         input:optional

Selects <input> elements with no 'required' attribute

·         input:out-of-range

Selects <input> elements with a value outside a specified range

·         input:read-only

Selects <input> elements with the 'readonly' attribute specified

·         input:read-write

Selects <input> elements with the 'readonly' attribute not specified

·         input:required

Selects <input> elements with the 'required' attribute specified

·         :root

Selects the documents root element

·         ::selection

Selects the portion of an element that is selected by a user

·         #id:target

Selects the current active #id element

·         input:valid

Selects all <input> elements with a valid value