CSS Selectors Cheat Sheet

CSS selector types and specificity

What this cheat sheet is for

This css selectors reference helps you complete common developer tasks quickly and avoid repeated trial-and-error when working under deadlines.

When you need a reliable command or pattern during debugging and incident response.
When you are implementing a feature and want a known-good syntax example immediately.
When onboarding teammates and documenting repeatable workflows for daily use.
When reviewing pull requests and verifying that command usage follows best practices.

h1 { color: blue; }
p { margin: 10px; }

.classname { color: red; }
.btn { padding: 10px; }

#id { background: yellow; }

[type="text"] { border: 1px solid; }
[href^="https"] { color: green; }
[class*="btn"] { cursor: pointer; }

a:hover { color: red; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid blue; }
p:nth-child(2) { margin-top: 20px; }

div p { color: blue; }
div > p { color: green; }
h1 + p { margin-top: 0; }
h1 ~ p { color: gray; }

People often copy a command or pattern without adapting placeholders, which can break production workflows unexpectedly.
It is easy to forget environment-specific differences, so always verify behavior in your shell, runtime, or API gateway before shipping.
Many errors come from skipping small validation steps, so test with realistic sample input before relying on the result.

Last updated: February 2026