CSS Selectors Reference

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

17.4Kuses

8.3/10(108)

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>

Recommended Products

📖Web Design BooksShop →🖥️Developer MonitorsShop →🎨Color Reference CardsShop →⌨️Coding KeyboardsShop →📚Design BooksShop →💻Laptop StandsShop →🖱️Wireless MouseShop →🔌USB-C HubShop →👓Blue Light GlassesShop →🖥️Desk PadShop →

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.