Jump to main content
Menu

Pseudo-Classes

Pseudo-Class Details

Pseudo-Class Usage and Effect Syntax
:first-child Styles the indicated element if it is the first child within its parent. li:first-child {font-style: italic;}
:last-child Styles the indicated element if it is the last child within its parent. li:last-child {border-bottom: 1px solid #000;}
:only-child Styles elements that have a parent but no siblings. blockquote:only-child {border: 1px solid #000;}
:first-of-type Styles elements that are the first of their type. blockquote:first-of-type {border: 1px solid #000;}
:last-of-type Styles elements that are the last of their type. blockquote:last-of-type {border: 1px solid #000;}
:nth-child() Styles elements that are the nth child of their parent.

Either accepts a number, values of odd/even, or a formula.

Formulas follow the pattern of (an + b). In the formula a represents a cycle size, n is a counter (this begins at zero), and b is an offset.

You can either use a + or a -, but generally you use a +. 		td:nth-child(3) {background: #ccc;}

All third data table cells have a #ccc background.

td:nth-child(odd) {background: #ccc;}
td:nth-child(even) {background: #eee;}

The count starts at 1, so the first table data cell is #ccc, the next is #eee, the next is #ccc, etc.

td:nth-child(3n+3) {background: #ccc;}

Every third data table cell has a #ccc background.
:nth-last-child() Styles elements that are the nth child of their parent, but starting from the bottom of the source code order.

Otherwise equivalent to :nth-child() 		td:nth-last-child(2) {background: #ccc;}

The second to last table data cell has a #ccc background.
:nth-of-type() Styles elements that are the nth child of the element type specified.

Either accepts a number, values of odd/even, or a formula.

Formulas follow the pattern of (an + b). In the formula a represents a cycle size, n is a counter (this begins at zero), and b is an offset.

You can either use a + or a -, but generally you use a +. 		p:nth-of-type(3) {background: #ccc;}

The third paragraph has a #ccc background.

p:nth-of-type(odd) {background: #ccc;}
p:nth-of-type(even) {background: #eee;}

The count starts at 1, so the first paragraph is #ccc, the next is #eee, the next is #ccc, etc.

p:nth-child(3n+3) {background: #ccc;}

Every third paragraph has a #ccc background.
:nth-last-of-type() Styles elements that are the nth child of the element type specified, but starting from the bottom of the source code order.

Otherwise equivalent to :nth-of-type() 		p:nth-last-of-type(2) {background: #ccc;}

The second to last paragraph has a #ccc background.
:not() Typically we are using a selector in order to isolate what needs to be styled. With :not, however, we are indicating what elements are explicitly not styled. :not(div) {background: #000;}

Every element not a div has a black background.
:empty Targets elements with no content (for some browsers the definition of "content" includes spaces and line feeds).

Empty elements that have content added to them via JavaScript when the page loads are matched by :empty, so those areas of the page can be specially styled using this pseudo-class. 		td:empty {background: #eee;}

Empty table data cells have an #eee background.
:lang Styles content based on the two-letter ISO 639 language code specified for that element. :lang(fr) {background: #eee;}

Elements indicated as being in French have an #eee background.
:target Styles the element that is the targeted area of the page (identified by an id attribute and accessed in the URL by # followed by the id value, which is how within-page anchors work).

The styles are only applied when that anchored area has been triggered (by clicking or by visiting the URL going to that area), which then draws attention to that area. 		:target {color: #fff; background: #000;}

Targeted areas are #fff on #000.
:checked Used for radio buttons and checkboxes and only applied when the element is checked / selected. :checked {background: #ccc;}

Checked elements have a #ccc background.
:enabled Styles enabled form elements. :enabled {border: 1px solid #000;}

Enabled form elements have a 1px solid #000 border.
:disabled Styles disabled form elements. :disabled {color: #ccc;}

Disabled form elements have #ccc text color.
:placeholder-shown Styles input and textarea elements with placeholder text shown. :placeholder-shown {border: 1px solid #000;}

Inputs and textareas with placeholders have 1px solid #000 borders.
::marker The "marker" is the bullet or number on the edge of the list item. li::marker {color: red;}

List item markers will have red text / coloring.
:focus-within This allows you to style a parent / ancestor element when a child / descendant within it gains focus (so this is most useful for form inputs and anchors, as those can receive focus without needing tabindex="0").

Very useful for drawing a user's attention to where the keyboard focus has been placed.		 fieldset:focus-within {background: #eee;}
Multiple states Specifies appearance when different states (:hover, :focus, etc.) occur at the same time. a:hover {text-decoration: none;}
a:focus {border: 2px solid #000;}
a:hover:focus {background: #000; color: #fff;}

Code Examples

:first-child and :last-child Example

See the Pen :first-child and :last-child by Jason Withrow (@jwithrow) on CodePen.

:only-child Example

See the Pen :only-child by Jason Withrow (@jwithrow) on CodePen.

:not Example

See the Pen :not by Jason Withrow (@jwithrow) on CodePen.

:empty Example

See the Pen :empty by Jason Withrow (@jwithrow) on CodePen.

:lang Example

See the Pen :lang by Jason Withrow (@jwithrow) on CodePen.

:target Example

See the Pen :target by Jason Withrow (@jwithrow) on CodePen.

:checked Example

See the Pen :checked by Jason Withrow (@jwithrow) on CodePen.

Check the form elements to see the outline appear; note that the amount of styles we can apply successfully to checkboxes and radio buttons is quite a short list - most of the time the CSS is simply ignored.

:enabled and :disabled Example

See the Pen :enabled and :disabled by Jason Withrow (@jwithrow) on CodePen.

:focus-within Example

See the Pen :focus-within by Jason Withrow (@jwithrow) on CodePen.