CSS | Type: CSSPseudo Classes

Some very handy classes and selectors to know.

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 inside element <p>
p:before - Insert content inside element <p>
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
input:enabled - Selects every enabled <input> element
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
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 specifi
input:read-write - Selects <input> elements with the ‘readonly’ attribute not specified
input:required - Selects <input> elements with the ‘required’ attribute specified
#id:target - Selects the current active
#id element input:valid - Selects all <input> elements with a valid value

p:empty - Selects every <p> element with no children
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
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 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
:not(p) - Selects every element that is not a <p>

p:nth-child(even) - Selects every second <p> element
p:nth-child(odd) - Selects odd <p> elements
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 element of its parent, counting from the last child
p:nth-of-type(2) - Selects every <p> element that is the second element of its parent

:root - Selects the documents root element
::selection - Selects the portion of an element that is selected by a user

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept