CSS Selectors Reference

Interactive CSS selectors reference with examples and browser support. Master every selector type.

0uses

0/10(0)

Basic Selectors

Fundamental selectors for targeting elements

*Selects all elements

All

CSS

* { margin: 0; }

HTML Example

<p>All elements</p>

elementSelects all elements of that type

All

CSS

p { color: blue; }

HTML Example

<p>Paragraph</p>

.classSelects elements with that class

All

CSS

.highlight { background: yellow; }

HTML Example

<p class="highlight">Highlighted</p>

#idSelects element with that ID

All

CSS

#header { font-size: 2rem; }

HTML Example

<div id="header">Header</div>

element, elementSelects multiple elements (grouping)

All

CSS

h1, h2 { font-weight: bold; }

HTML Example

<h1>Title</h1><h2>Subtitle</h2>

Combinator Selectors

Selectors that define relationships between elements

A BDescendant: B inside A (any depth)

All

CSS

div p { color: red; }

HTML Example

<div><p>Nested paragraph</p></div>

A > BChild: B is direct child of A

All

CSS

ul > li { list-style: none; }

HTML Example

<ul><li>Direct child</li></ul>

A + BAdjacent sibling: B immediately after A

All

CSS

h1 + p { margin-top: 0; }

HTML Example

<h1>Title</h1><p>First paragraph</p>

A ~ BGeneral sibling: B after A (same parent)

IE7+

CSS

h1 ~ p { color: gray; }

HTML Example

<h1>Title</h1><p>Any sibling p</p>

Pseudo-Class Selectors

Select elements based on state or position

:hoverMouse is over the element

All

CSS

a:hover { color: red; }

HTML Example

<a>Hover me</a>

:focusElement has keyboard focus

All

CSS

input:focus { border-color: blue; }

HTML Example

<input>

:activeElement being clicked/tapped

All

CSS

button:active { transform: scale(0.98); }

HTML Example

<button>Click</button>

:first-childFirst child of its parent

IE7+

CSS

li:first-child { font-weight: bold; }

HTML Example

<ul><li>First</li><li>Second</li></ul>

:last-childLast child of its parent

IE9+

CSS

li:last-child { border: none; }

HTML Example

<ul><li>First</li><li>Last</li></ul>

:nth-child(n)nth child of its parent

IE9+

CSS

tr:nth-child(2n) { background: #f5f5f5; }

HTML Example

<tr>Even rows</tr>

:nth-of-type(n)nth of its type in parent

IE9+

CSS

p:nth-of-type(2) { color: blue; }

HTML Example

<p>2nd paragraph</p>

:not(selector)Negation - everything except match

IE9+

CSS

input:not([type='submit']) { width: 100%; }

HTML Example

<input type='text'>

:checkedChecked inputs (radio/checkbox)

IE9+

CSS

input:checked + label { font-weight: bold; }

HTML Example

<input type='checkbox' checked>

:disabledDisabled form elements

IE9+

CSS

input:disabled { opacity: 0.5; }

HTML Example

<input disabled>

:emptyElements with no children

IE9+

CSS

div:empty { display: none; }

HTML Example

<div></div>

:first-of-typeFirst of its type in parent

IE9+

CSS

p:first-of-type { font-size: 1.2em; }

HTML Example

<p>First paragraph</p>

:focus-withinParent contains focused element

Modern

CSS

form:focus-within { box-shadow: 0 0 3px blue; }

HTML Example

<form><input></form>

:has(selector)Parent contains matching child

2023+

CSS

div:has(> img) { padding: 10px; }

HTML Example

<div><img></div>

:is(list)Matches any selector in list

Modern

CSS

:is(h1, h2, h3) { margin-top: 1em; }

HTML Example

<h1>Heading</h1>

Pseudo-Element Selectors

Target specific parts of elements

::beforeInsert content before element

IE8+

CSS

.req::before { content: "*"; color: red; }

HTML Example

<span class="req">Field</span>

::afterInsert content after element

IE8+

CSS

.ext::after { content: " ↗"; }

HTML Example

<a class="ext">Link</a>

::first-lineFirst line of a block element

All

CSS

p::first-line { font-weight: bold; }

HTML Example

<p>First line of text</p>

::first-letterFirst letter of a block element

All

CSS

p::first-letter { font-size: 2em; }

HTML Example

<p>Drop cap</p>

::placeholderPlaceholder text of inputs

Modern

CSS

input::placeholder { color: #999; }

HTML Example

<input placeholder='Type here'>

::selectionHighlighted/selected text

Modern

CSS

::selection { background: #b3d4fc; }

HTML Example

<p>Select this text</p>

::markerList item markers/bullets

Modern

CSS

li::marker { color: red; }

HTML Example

<li>List item</li>

Attribute Selectors

Select elements based on their attributes

[attr]Element has attribute

IE7+

CSS

[required] { border-color: red; }

HTML Example

<input required>

[attr="val"]Attribute equals exact value

IE7+

CSS

[type="email"] { width: 300px; }

HTML Example

<input type="email">

[attr~="val"]Attribute contains word in space-separated list

IE7+

CSS

[class~="btn"] { cursor: pointer; }

HTML Example

<div class="btn primary">OK</div>

[attr^="val"]Attribute starts with value

IE7+

CSS

[href^="https"] { color: green; }

HTML Example

<a href="https://...">Secure</a>

[attr$="val"]Attribute ends with value

IE7+

CSS

[src$=".png"] { border: 1px solid; }

HTML Example

<img src="photo.png">

[attr*="val"]Attribute contains value anywhere

IE7+

CSS

[href*="example"] { text-decoration: underline; }

HTML Example

<a href="www.example.com">Link</a>

[attr|="val"]Attribute equals val or starts with val-

IE7+

CSS

[lang|="en"] { quotes: "“" "”"; }

HTML Example

<p lang="en-US">English</p>

Disclaimer:This tool is provided “as is” for informational and educational purposes only. Results may not be 100% accurate. ToolBird makes no warranties, express or implied, regarding the accuracy, reliability, or completeness of any output generated by this tool. This tool does not constitute professional, legal, financial, medical, or tax advice. Always consult a qualified professional for important decisions. By using this tool, you agree that ToolBird and its operators shall not be held liable for any damages, losses, or consequences arising from the use of this tool or reliance on its results. All processing occurs in your browser — we do not store, transmit, or access your data. Use at your own risk.