Selector

Description

Example

*

Selects all elements on the page

* { margin: 0; }

element

Selects specific elements (e.g., div, p, h1)

p { color: blue; }

#id

Selects an element with a specific ID

#header { font-size: 20px; }

.class

Selects elements with a specific class

.active { background: red; }

selector1, selector2

Selects multiple elements at once

h1, h2 { color: green; }

selector1 selector2

Selects elements inside another

div p { margin: 10px; }

selector1 > selector2

Selects direct child elements

ul > li { list-style: none; }

selector1 + selector2

Selects the next element right after another

h1 + p { font-weight: bold; }

selector1 ~ selector2

Selects all elements that come after another

h1 ~ p { color: gray; }

[attribute]

Selects elements with an attribute

[type] { border: 1px solid; }

[attribute=value]

Selects elements with a specific attribute value

[type="text"] { width: 100%; }

[attribute~=value]

Selects elements where attribute includes a word

[class~="btn"] { padding: 10px; }

[attribute^=value]

Selects elements where the attribute starts with specific text

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

[attribute$=value]

Selects elements where the attribute ends with specific text

[src$=".png"] { width: 200px; }

[attribute*=value]

Selects elements where the attribute contains specific text

[title*="error"] { color: red; }

:hover

Selects elements when you hover over them with a mouse

button:hover { background: yellow; }

:focus

Selects elements when they are focused (e.g., a clicked input box)

input:focus { outline: 2px solid; }

:active

Selects elements when they are clicked or pressed

a:active { color: orange; }

:nth-child(n)

Selects the nth element in a list

li:nth-child(2) { color: red; }

:nth-of-type(n)

Selects the nth element of a specific type

p:nth-of-type(1) { font-size: 20px; }

:first-child

Selects the first element in a group

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

:last-child

Selects the last element in a group

li:last-child { color: green; }

:only-child

Selects an element that is the only child

div:only-child { padding: 10px; }

:first-of-type

Selects the first element of a specific type

h1:first-of-type { margin: 0; }

:last-of-type

Selects the last element of a specific type

p:last-of-type { color: purple; }

:only-of-type

Selects an element that is the only one of its type

h2:only-of-type { text-align: center; }

:not(selector)

Selects all elements except the ones you specify

div:not(.active) { opacity: 0.5; }

:checked

Selects checkboxes or radio buttons that are checked

input:checked { background: blue; }

:disabled

Selects elements that are disabled

button:disabled { opacity: 0.5; }

:enabled

Selects elements that are enabled

button:enabled { cursor: pointer; }

:empty

Selects elements with no content inside

div:empty { display: none; }

:root

Selects the root element (usually the <html> tag)

:root { --main-color: blue; }

:target

Selects elements targeted by a URL link

#section:target { border: 2px solid; }

::before

Adds content before an element

p::before { content: "Note: "; }

::after

Adds content after an element

p::after { content: " End"; }

::first-letter

Selects and styles the first letter of text

p::first-letter { font-size: 20px; }

::first-line

Selects and styles the first line of text

p::first-line { color: gray; }

::selection

Styles text that you highlight or select

::selection { background: yellow; }

::placeholder

Styles the placeholder text inside inputs

input::placeholder { color: gray; }

::marker

Styles bullets or numbers in a list

li::marker { color: red; }

:lang(language)

Selects elements written in a specific language

p:lang(en) { font-style: italic; }

:has(selector)

Selects elements containing specific child elements

div:has(img) { border: 1px solid; }

:is(selector)

Selects any element from a list of options

:is(h1, h2) { margin: 0; }

:where(selector)

Similar to :is, but does not affect styling priority

:where(h1, h2) { padding: 0; }

:any-link

Selects all links

:any-link { color: blue; }

:current

Selects the currently active element in a group

nav :current { font-weight: bold; }

:scope

Selects elements relative to the current context

:scope p { color: red; }

All CSS Selectors You Need, Explained with Examples

Quickly find and understand CSS selectors—ID, class, group selectors, and more—with clear descriptions and practical examples. Save time and code efficiently with SelectorForge!

What You’ll Find Here

Comprehensive Selector List : Explore a wide range of CSS selectors such as id selector, class selector, attribute selectors, and more.

Clear Explanations : Every selector comes with a simple, short, easy-to-understand description to help you grasp its function quickly.

Practical Examples : We provide real-world examples to show how each selector is applied, helping you understand its real-world use case.

Searchable Database :Quickly find the CSS selector you need using our easy-to-use search functionality.

Our Mission

At SelectorForge, our mission is simple: to provide developers with a straightforward, accessible, and highly effective reference for CSS selectors. We understand that CSS can be daunting at times, especially when it comes to understanding the different types of selectors and their proper use. That’s why we’ve built a clean, modern interface that makes learning and implementing CSS selectors quick and easy.

We focus on providing a curated list of CSS selectors, from basic ones like the id and class selectors to more advanced group selectors and pseudo-classes. Each selector comes with a detailed description and practical examples to ensure you understand exactly how to implement them in your projects.