A pseudo class is usually added to the end of a selector to define a special state of an element. It is used in CSS so the styling can target a specific type/state of element. Here is the syntax and example of a pseudo class:
/* Syntax */
selector:pseudo-class {
property: value;
}
/* Example */
a.link:hover {
color: #666666;
}
Below I have listed all CSS pseudo classes:
Element states (links)
:hover
Targets links on mouse over
:active
Targets the active link
:visited
Targets a link which has previously been visited by the user
:link
Targets a link which has not previously been visited by the user
Element states (inputs & links)
:focus
Targets an input element that is currently being used or that the mouse is focusing on
:checked
Targets an input element, of type checkbox or radio, when they are checked or with on state
:indeterminate
Targets an input element, of type checkbox or radio, whose indeterminate DOM property is set to true by JavaScript
:enabled
Targets form elements, that are selected, clicked on, that you can enter data into, or that you can focus on
:in-range
Targets an input element when their value is within the range specified
:out-of-range
Targets an input element when their value is outside the range specified
:valid
Targets elements that contain valid content, determined by its type="" attribute
:invalid
Targets elements that do not contain valid content, determined by its type="" attribute
Element Targeting (based on attribute)
:lang(language)
Targets elements based on the context of their given language attribute
:read-only
Targets an input element containing “readonly” attribute
:read-write
Targets an input element not containing “readonly” attribute
:required
Targets an input element containing “required” attribute
:optional
Targets an input element not containing “required” attribute
:target
Targets elements that have an id attribute which matches the hash in the URL
:disabled
Targets an input element containing “disabled” attribute
Element Targeting (based on position/numbering)
:first-child
Targets the first element immediately inside another element
:last-child
Targets the first element immediately inside another element
:first-of-type
Targets the first element of that type within its parent element
:last-of-type
Targets the last element of that type within its parent element
:only-of-type
Targets element that is the only on of its type within its parent element
:only-child
Targets element inside another element that is the only element within its parent element
:nth-child(n)
Targets positioned element, specified in (n), within its parent element
:nth-of-type(n)
Targets positioned element, specified in (n), of that type
:nth-last-child(n)
Targets positioned element, from last to first, specified in (n), inside another element
:nth-last-of-type(n)
Targets positioned element, from last to first, specified as (n), of that type
:root
Targets the highest-level parent element
Relational Element Targeting
:not(selector)
Targets elements that are not a particular element. I have listed some examples below:
a:not(.highlighted) {...}
p:not(:first-of-type) {...}
input:not([type="checkbox"]) {...}
/* Even multiple :not selectors can be used: */
div:not(.block):not(:first-of-type) {...}
:empty
Targets elements that do not have any child elements or content
Content Targeting
::first-letter
Targets the first letter in that element
::first-line
Targets the first line in that element
::selection
Targets any text the user has selected or highlighted
Pseudo Elements
These allow you to add content into your page from CSS. They will not appear in the DOM but they will display on the page like any other element would. They will only be added to the page if the content: ; styling is added to the selector. Here are the different values that can be inserted into content: ;:
- A string – You can add any wording you like, but special characters and HTML entities need to be written as a unicode entity.
- A URL image – This cannot be resized, so it needs to be added in the correct dimensions.
- Nothing – You can simple include
" ". This is useful for setting background images or using the element for other styling.
::before
Inserts element before targeted element
::after
Inserts element after targeted element
Browser support tip: The double colon (::) is supported by all browsers except IE8. If you require IE8 support, then use a single colon (:) instead, which is also supported by all browsers.
References
http://www.w3schools.com/css/css_pseudo_classes.asp
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://css-tricks.com/pseudo-class-selectors/
Rachel Bull 