CSS Selectors Reference
CSS selectors reference with examples
CSS Selectors Reference is a free online tool from BrowserUtils that css selectors reference with examples. It runs entirely in your browser — your data never leaves your device. No account required.
*
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; }
How to use CSS Selectors Reference
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
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.
CSS Selectors Reference specs
- Runtime
- 100% client-side (browser)
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
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.
What is the difference between :nth-child and :nth-of-type?
:nth-child(n) selects elements based on their position among all siblings, while :nth-of-type(n) only counts siblings of the same element type. Use :nth-of-type when you want to target, for example, every other paragraph regardless of other sibling elements.
How do I select elements by attribute in CSS?
Use bracket notation: [attr] matches elements with the attribute, [attr="value"] matches an exact value, [attr^="value"] matches a prefix, [attr$="value"] matches a suffix, and [attr*="value"] matches a substring.
What is the :has() CSS selector?
The :has() selector matches a parent element that contains a specific child or descendant. For example, div:has(> img) selects any div with a direct img child. It is supported in all modern browsers as of 2024.
Comments
Related tools
More Developer Reference
ASCII TableHTML Entities ReferenceRegex CheatsheetHTML Color NamesKeyboard KeycodesUnicode TableHTML Tags ReferenceCSS Units Reference
View all Developer Reference tools
Comments