CSS cheatsheet

Posted by & filed under VIllage.

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 <ul> 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 value

Leave a Reply

Your email address will not be published. Required fields are marked *