Selector {} Cheatsheet

Element

a {color: red;} h2 {font-size: 16px;}

Class

.center {text-align: left;} .front {color: black;}

Id

#name {color: green;} #h1 {color: blue;}

Universal

* {text-align: left;}

Multiple

h1, h2, h3 {text-align: center;} p, span {color: purple;}

Pseudo class

button:hover {color: red;} tr:only-child {text-align: center;}

Pseudo element

p::first-line {font-weight: 400;} h1::before {content: "";}

Attribute

h1[rel="external"] { color: red; } input[type="text"] { padding: 3px; }

Combinator

div p { color: red; } ul > li {border-top: 5px solid red;}

::first-letter

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

::before

h1::before { content: ""; } div::before { display: block; }

::after

p::after { content: "."; } a::after { color: blue; }

::marker

li::marker { color: red; } summary::marker { font-size: 20px; }

::selection

p::selection { background: yellow; } div::selection { color: red; }

::first-line

p::first-line { color: blue; } div::first-line { font-weight: bold; }

::grammar-error

p::grammar-error { color: red; } div::grammar-error { text-decoration: underline; }

::spelling-error

p::spelling-error { color: red; } div::spelling-error { text-decoration: underline; }

:dir

:dir(ltr) { color: red; } :dir(rtl) { color: blue; }

:lang

:lang(en) { color: red; } :lang(fr) { color: blue; }

:any-link

:any-link { color: red; } a:any-link { font-weight: bold; }

:link

a:link { color: red; } nav a:link { text-decoration: none; }

:local-link

a:local-link { color: red; } nav a:local-link { font-weight: bold; }

:target

:target { border: 1px solid red; } div:target { background: yellow; }

:target-within

:target-within { background: yellow; } div:target-within { border: 1px solid red; }

:scope

:scope { color: red; } div:scope { font-weight: bold; }

:hover

a:hover { color: red; } button:hover { background: blue; }

:active

a:active { color: red; } button:active { background: blue; }

:focus

input:focus { border: 1px solid red; } button:focus { outline: none; }

:focus-visible

button:focus-visible { outline: 1px solid red; } input:focus-visible { background: yellow; }

:focus-within

form:focus-within { background: yellow; } div:focus-within { border: 1px solid red; }

:current

:current(p) { color: red; } :current(div) { font-weight: bold; }

:past

:past(p) { color: red; } :past(div) { font-weight: bold; }

:future

:future(p) { color: red; } :future(div) { font-weight: bold; }

:playing

video:playing { border: 1px solid red; } audio:playing { background: yellow; }

:paused

video:paused { border: 1px solid red; } audio:paused { background: yellow; }

:autofill

input:autofill { background: yellow; } input:-webkit-autofill { color: red; }

:enabled

button:enabled { color: red; } input:enabled { background: yellow; }

Whitespace

div p { color: red; } ul li { font-weight: bold; }

Asterisk

* { color: red; } div * { font-weight: bold; }

Greater than

div > p { color: red; } ul > li { font-weight: bold; }

Plus

div + p { color: red; } h1 + p { font-weight: bold; }

Tilde

div ~ p { color: red; } h1 ~ p { font-weight: bold; }

Attribute Only Match

h2[title] { color: red; } a[href] { font-weight: bold; }

[att=val]

a[href="index.html"] { color: red; } input[type="text"] { background: yellow; }

[att|=val]

p[lang|="en"] { color: red; } div[class|="top"] { font-weight: bold; }

[att^=val]

a[href^="https"] { color: red; } div[class^="test"] { font-weight: bold; }

[att$=val]

a[href$=".pdf"] { color: red; } img[src$=".png"] { border: 1px solid red; }

[att~=val]

div[class~="test"] { color: red; } p[title~="flower"] { font-weight: bold; }

[att*=val]

a[href*="example"] { color: red; } div[class*="test"] { font-weight: bold; }