CSS Selectors & Specificity

Selectors for targeting elements by type, class, ID, or selector list.

Selector	Name	Description	Example
*	Universal Selector	Selects every element. Specificity: 0-0-0.	*
element	Type Selector	Selects every matching element. Specificity: 0-0-1.	div
.class	Class Selector	Selects elements with a matching class. Specificity: 0-1-0.	.my-class
#id	ID Selector	Selects the element with a matching ID. Specificity: 1-0-0.	#my-id
selector1, selector2	Selector List	Applies the same rule to multiple selectors.	div, p

Combinators for selecting elements based on their relationship to other elements.

Selector	Name	Description	Example
A B	Descendant	Selects B elements anywhere inside A.	div p
A > B	Child	Selects B elements that are direct children of A.	div > p
A + B	Adjacent Sibling	Selects the first B immediately following A.	div + p
A ~ B	General Sibling	Selects matching B siblings that follow A.	div ~ p

Selectors for matching elements based on the presence or value of attributes.

Selector	Name	Description	Example
[attr]	Attribute Present	Selects elements containing the named attribute.	[href]
[attr="value"]	Exact Value	Selects elements whose attribute exactly matches the value.	[href="https://example.com"]
[attr^="value"]	Begins With	Matches attribute values beginning with specified text.	[href^="https://"]
[attr$="value"]	Ends With	Matches attribute values ending with specified text.	[href$=".com"]
[attr*="value"]	Contains	Matches attribute values containing specified text.	[href*="example"]

Pseudo-classes for matching elements based on state, position, or other conditions.

Selector	Name	Description	Example
:hover	Hover	Matches an element while the pointer is over it.	div:hover
:focus	Focus	Matches the currently focused element.	input:focus
:focus-visible	Visible Focus	Matches focus when a visible focus indicator is appropriate.	input:focus-visible
:active	Active	Matches an element while it is being activated.	button:active
:visited	Visited Link	Matches a link whose destination has been visited.	a:visited
:checked	Checked	Matches selected checkboxes, radio buttons, and options.	input:checked
:first-child	First Child	Matches an element that is the first child of its parent.	div:first-child
:last-child	Last Child	Matches an element that is the last child of its parent.	div:last-child
:nth-child()	Nth Child	Matches elements based on sibling position.	div:nth-child(2)
:not()	Negation	Matches elements that do not satisfy the selector in parentheses.	div:not(.exclude)
:is()	Matches Any	Matches an element if any selector in its list matches.	div:is(.class1, .class2)
:where()	Zero-Specificity Group	Works like :is() but contributes zero specificity.	div:where(.class1, .class2)
:has()	Relational Selector	Matches an element based on related elements.	div:has(.class1)

Pseudo-elements for styling specific parts of an element or generated content.

Selector	Name	Description	Example
::before	Before	Creates generated content before an element's content.	div::before
::after	After	Creates generated content after an element's content.	div::after
::first-letter	First Letter	Styles the first letter of a block.	div::first-letter
::first-line	First Line	Styles the first formatted line of a block.	div::first-line
::selection	Selection	Styles text selected by the user.	div::selection
::placeholder	Placeholder	Styles placeholder text in form controls.	input::placeholder
::marker	List Marker	Styles the marker of a list item.	li::marker

CSS selector patterns, their specificity values, and how they affect rule priority.

Pattern	Specificity	Description	Example
#id	1-0-0	Each ID selector adds one to the ID column.	#my-id
.class, [attr], :hover	0-1-0	Classes, attributes, and pseudo-classes add to the class column.	.my-class
element, ::before	0-0-1	Type selectors and pseudo-elements add to the type column.	div::before
*	0-0-0	The universal selector adds no specificity.	*
:where()	0-0-0	The entire selector contributes zero specificity.	:where(div)

CSS cascade rules and the factors used to determine which declaration takes precedence.

Rule	Name	Description	Example
!important	Important vs. Normal	Important declarations generally outrank normal declarations.	div{ color: red !important; }
Inline style	Inline Declaration	Styles in an element's style attribute outrank normal stylesheet declarations.	style="color: red;"
Origin / layer	Cascade Origin & Layer	Origin and cascade layers are considered before specificity.	div{ color: red; }
Specificity	Selector Weight	More specific selectors win when other cascade factors are equal.	div#my-id
Source order	Later Rule	If specificity is equal, the later declaration wins.	div{ color: blue; }
Inheritance	Inherited Value	Some properties inherit from ancestors when no direct value is set.	div{ color: inherit; }