Here's a helpful CSS cheatsheet!
-
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 with a parent of <div>
div + p
Selects all <p> elements placed immediately after <div> elements
div~ul
Selects all <p> elements preceded by <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 valueHopes this helps you guys!
-
@julian Believe it or not, but I've never went there before for CSS reference, but I'll read up on it further here since of course they are the "authority" in web standards.