CSS Selectors Reference
// CSS selectors reference with examples
*
Universal selector - selects all elements
* { margin: 0; }
element
Type selector - selects all elements of type
p { color: blue; }
.class
Class selector - selects elements with class
.intro { font-size: 18px; }
#id
ID selector - selects element with specific ID
#header { height: 60px; }
[attr]
Attribute selector - has attribute
[disabled] { opacity: 0.5; }
[attr=val]
Attribute equals value
[type="text"] { border: 1px solid; }
[attr~=val]
Attribute contains word
[class~="btn"] { cursor: pointer; }
[attr|=val]
Attribute starts with value (or value-)
[lang|="en"] { color: blue; }
[attr^=val]
Attribute starts with value
[href^="https"] { color: green; }
[attr$=val]
Attribute ends with value
[src$=".png"] { border: none; }
[attr*=val]
Attribute contains value
[class*="col-"] { float: left; }
A B
Descendant - B inside A (any depth)
div p { margin: 10px; }
A > B
Child - B is direct child of A
ul > li { list-style: none; }
A + B
Adjacent sibling - B immediately after A
h2 + p { margin-top: 0; }
A ~ B
General sibling - B after A (same parent)
h2 ~ p { color: gray; }
A, B
Grouping - selects both A and B
h1, h2 { font-weight: bold; }
:hover
Mouse over element
a:hover { color: red; }
:focus
Element has focus
input:focus { outline: 2px solid blue; }
:active
Element being activated (clicked)
button:active { transform: scale(0.95); }
:visited
Visited link
a:visited { color: purple; }
:focus-within
Element or descendant has focus
form:focus-within { border-color: blue; }
:focus-visible
Focus via keyboard navigation
button:focus-visible { outline: 2px solid; }
:checked
Checked input/option
input:checked { accent-color: green; }
:disabled
Disabled form element
input:disabled { opacity: 0.5; }
:enabled
Enabled form element
input:enabled { border-color: gray; }
:required
Required form element
input:required { border-left: 3px solid red; }
:optional
Optional form element
input:optional { border-left: none; }
:valid
Valid form element
input:valid { border-color: green; }
:invalid
Invalid form element
input:invalid { border-color: red; }
:placeholder-shown
Input showing placeholder
input:placeholder-shown { font-style: italic; }
:target
Element targeted by URL fragment
:target { background: yellow; }
:first-child
First child of parent
li:first-child { font-weight: bold; }
:last-child
Last child of parent
li:last-child { border-bottom: none; }
:nth-child(n)
Nth child of parent
tr:nth-child(odd) { background: #f5f5f5; }
:nth-last-child(n)
Nth child from end
li:nth-last-child(2) { color: red; }
:only-child
Only child of parent
p:only-child { margin: 0; }
:first-of-type
First of its type in parent
p:first-of-type { font-size: 1.2em; }
:last-of-type
Last of its type in parent
p:last-of-type { margin-bottom: 0; }
:nth-of-type(n)
Nth of its type in parent
p:nth-of-type(2n) { color: blue; }
:only-of-type
Only of its type in parent
img:only-of-type { display: block; }
:empty
Element with no children
div:empty { display: none; }
:root
Document root element
:root { --color: blue; }
:not(sel)
Negation - not matching selector
p:not(.intro) { font-size: 14px; }
:is(sel)
Matches any of the selectors
:is(h1,h2,h3) { color: navy; }
:where(sel)
Like :is() but zero specificity
:where(h1,h2) { margin: 0; }
:has(sel)
Parent selector - contains match
div:has(> img) { padding: 10px; }
::before
Insert content before element
p::before { content: "→ "; }
::after
Insert content after element
a::after { content: " ↗"; }
::first-line
First line of text
p::first-line { font-weight: bold; }
::first-letter
First letter of text
p::first-letter { font-size: 2em; }
::selection
User-selected text
::selection { background: yellow; }
::placeholder
Input placeholder text
::placeholder { color: #999; }
::marker
List item marker
::marker { color: red; }
#About CSS Selectors Reference
Free online CSS selectors reference. Browse all CSS selector types with syntax, descriptions, and examples. Includes basic, combinator, pseudo-class, and pseudo-element selectors. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
What are CSS selectors? ▾
CSS selectors are patterns used to select HTML elements you want to style. They range from simple element selectors (like div) to complex combinations using pseudo-classes, attributes, and combinators.
What is CSS specificity? ▾
CSS specificity determines which styles are applied when multiple rules target the same element. Inline styles have the highest specificity, followed by IDs, classes/pseudo-classes/attributes, and finally element/pseudo-element selectors.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-selectors-reference" width="100%" height="500" frameborder="0" title="CSS Selectors Reference"></iframe>