Accueil Quick ReferenceRéférence des Sélecteurs CSS

Référence des Sélecteurs CSS

Guide de référence complet des sélecteurs CSS avec exemples.

56 selectors

Basic

*

Universal selector — selects all elements

* { margin: 0; }

element

Type selector — selects all elements of that type

p { color: red; }

.class

Class selector — selects elements with that class

.card { border: 1px; }

#id

ID selector — selects the element with that ID

#header { height: 60px; }

Attribute

[attr]

Attribute selector — elements with the attribute

[disabled] { opacity: 0.5; }

[attr=value]

Attribute equals value

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

[attr~=value]

Attribute contains word (space-separated)

[class~="highlight"] { background: yellow; }

[attr|=value]

Attribute starts with value followed by hyphen

[lang|="en"] { font-family: sans; }

[attr^=value]

Attribute starts with value

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

[attr$=value]

Attribute ends with value

[src$=".jpg"] { border: 0; }

[attr*=value]

Attribute contains value (substring)

[href*="example"] { color: blue; }

[data-*]

Custom data attribute selector

[data-theme="dark"] { background: #111; }

[attr i]

Case-insensitive attribute match

[type="text" i] { padding: 4px; }

Combinators

A B

Descendant combinator — B is inside A (any depth)

div p { margin: 0; }

A > B

Child combinator — B is direct child of A

ul > li { list-style: none; }

A + B

Adjacent sibling — B immediately follows A

h2 + p { margin-top: 0; }

A ~ B

General sibling — B follows A (not necessarily adjacent)

h2 ~ p { color: gray; }

Pseudo-classes

:hover

Element being hovered by mouse

a:hover { text-decoration: underline; }

:focus

Element that has focus

input:focus { border-color: blue; }

:active

Element being activated (clicked)

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

:visited

Link that has been visited

a:visited { color: purple; }

:link

Unvisited link

a:link { color: blue; }

:first-child

First child of its parent

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

:last-child

Last child of its parent

li:last-child { border-bottom: none; }

:nth-child(n)

Nth child of its parent

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

:nth-last-child(n)

Nth child counting from the end

li:nth-last-child(2) { margin-bottom: 0; }

:first-of-type

First element of its type among siblings

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

:last-of-type

Last element of its type among siblings

p:last-of-type { margin-bottom: 0; }

:nth-of-type(n)

Nth element of its type among siblings

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

:not(selector)

Elements that do NOT match the selector

input:not([type="submit"]) { border: 1px solid; }

:empty

Element with no children

div:empty { display: none; }

:checked

Checked input (checkbox/radio)

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

:disabled

Disabled form element

input:disabled { background: #eee; }

:enabled

Enabled form element

input:enabled { background: white; }

:required

Required form element

input:required { border-left: 3px solid red; }

:optional

Optional form element (not required)

input:optional { border-left: 3px solid gray; }

:root

Root element (html)

:root { --primary: #333; }

:target

Element whose ID matches the URL fragment

:target { background: yellow; }

:is()

Matches any of the selectors in the list

:is(h1, h2, h3) { line-height: 1.2; }

:where()

Like :is() but with zero specificity

:where(h1, h2, h3) { color: black; }

:has()

Parent containing a matching child

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

Pseudo-elements

::before

Creates a pseudo-element before the element

a::before { content: "→ "; }

::after

Creates a pseudo-element after the element

a::after { content: " ↗"; }

::first-letter

First letter of a block element

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

::first-line

First line of a block element

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

::selection

Portion selected by the user

::selection { background: yellow; }

::placeholder

Placeholder text in input

input::placeholder { color: gray; }

::marker

Marker of a list item

li::marker { color: red; }

Grouping

A, B

Grouping — multiple selectors share the same rules

h1, h2, h3 { font-family: sans; }

A.class

Element with specific class

p.intro { font-size: 1.1em; }

A#id

Element with specific ID

div#main { max-width: 800px; }

Specificity

!important

Overrides all other declarations (avoid when possible)

.hide { display: none !important; }

style=""

Inline style (specificity = 1,0,0,0)

<p style="color:red">

#id selector

1 ID selector (specificity = 0,1,0,0)

#nav { background: black; }

.class :pseudo

1 class/pseudo-class/attribute (specificity 0,0,1,0)

.active { color: blue; }

element

1 type selector (specificity = 0,0,0,1)

p { color: black; }