CSS Selector Cheat Sheet

All CSS selectors, combinators and pseudo-classes in one place.

Basic selectors Combinators Attribute selectors Structural pseudo-classes State and form pseudo-classes Logical pseudo-classes Pseudo-elements Specificity (high to low)

51 entries

Basic selectors

*

Every element

p

Type selector: all <p> elements

.card

Class selector

#main

ID selector

a, b

Selector list: matches a or b

Combinators

ul li

Descendant: any li inside ul

ul > li

Child: li that is a direct child of ul

h2 + p

Adjacent sibling: p right after h2

h2 ~ p

General sibling: every p after h2 with the same parent

Attribute selectors

[disabled]

Has the attribute

[type="text"]

Attribute equals the value

[href^="https"]

Attribute starts with

[href$=".pdf"]

Attribute ends with

[class*="btn"]

Attribute contains the substring

[lang|="en"]

Equals en or starts with en-

[title~="note"]

Whitespace-separated list contains the word

[type="a" i]

Case-insensitive value match

Structural pseudo-classes

:first-child / :last-child

First / last child of its parent

:only-child

The only child of its parent

:nth-child(2n+1)

Odd children (formula an+b)

:nth-last-child(2)

Second child counting from the end

:first-of-type / :last-of-type

First / last element of its type among siblings

:nth-of-type(3)

Third element of its type

:empty

Elements with no children or text

:root

The document root (html)

State and form pseudo-classes

:hover

Pointer is over the element

:focus / :focus-visible

Element has focus / keyboard focus ring

:focus-within

Element or a descendant has focus

:active

Being pressed

:checked

Checked checkbox or radio

:disabled / :enabled

Disabled / enabled form control

:required / :optional

Required / optional field

:valid / :invalid

Passes / fails validation

:placeholder-shown

Input currently shows its placeholder

:link / :visited

Unvisited / visited links

Logical pseudo-classes

:not(.a)

Elements that do not match the selector

:is(h1, h2, h3)

Matches any selector in the list (forgiving)

:where(h1, h2)

Like :is() but with zero specificity

:has(> img)

Parent selector: has a matching descendant or child

Pseudo-elements

::before / ::after

Generated content before / after the element content

::first-line

First formatted line of a block

::first-letter

First letter (drop caps)

::selection

Text selected by the user

::placeholder

Placeholder text of an input

::marker

List bullet or number

Specificity (high to low)

!important

Overrides normal declarations

inline style

style="..." attribute: 1,0,0,0

#id

ID selectors: 0,1,0,0 each

.class [attr] :pseudo-class

Class-level selectors: 0,0,1,0 each

element ::pseudo-element

Type-level selectors: 0,0,0,1 each

* + > ~ :where()

Add nothing to specificity

CSS Selector Cheat Sheet

Selectors decide which elements a CSS rule applies to. Knowing the full set saves you from extra classes, JavaScript and fragile markup. This page lists every selector family in the order you tend to need them, with a short explanation for each, and a search box that filters all entries instantly.

What is covered

Basic selectors target elements by type, class, ID or all at once.
Combinators describe relationships: descendant, child, adjacent sibling and general sibling.
Attribute selectors match attributes and their values, including starts-with, ends-with and contains patterns.
Structural pseudo-classes such as :first-child and :nth-of-type pick elements by their position among siblings.
State and form pseudo-classes react to hover, focus, validation and checked state without scripts.
Logical pseudo-classes (:not, :is, :where, :has) combine and negate selectors.
Pseudo-elements style generated content or parts of an element, such as ::before and ::placeholder.

Specificity in short

When two rules conflict, the more specific selector wins. Count IDs first, then classes, attributes and pseudo-classes, then element names and pseudo-elements. Inline styles beat all of these and !important beats inline styles, so use it sparingly. If your rule is ignored, open the browser DevTools and look at the struck-through declarations in the Styles pane to find the winning selector.

Practical advice

Keep selectors short and based on classes so they are easy to override. Avoid long descendant chains that tie your CSS to the HTML structure. Prefer :focus-visible over :focus for keyboard rings, and use :where() for resets and base styles so components can override them without specificity fights. Use the copy button to paste a selector straight into your stylesheet or into querySelectorAll.

Frequently Asked Questions

What is the difference between a descendant and a child selector?

A space (ul li) matches li at any depth inside ul, while ul > li only matches li elements that are direct children of ul.

How does :nth-child(2n+1) work?

The formula an+b counts from n = 0, so 2n+1 matches the 1st, 3rd, 5th child and so on (odd). Use 2n or even for even children and -n+3 for the first three.

What is the difference between :is() and :where()?

Both accept a list of selectors and match any of them. :is() takes the specificity of its most specific argument, while :where() always has zero specificity, which makes it ideal for easy-to-override defaults.

Is there a CSS parent selector?

Yes. :has() selects an element based on its descendants or following siblings, for example a:has(> img) targets links that contain an image. It is supported by all current browsers.