CSS Selectors Cheat Sheet

Element Selectors

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

Class Selectors

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

ID Selectors

#id { background: yellow; }

Attribute Selectors

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

Pseudo-classes

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

Combinators

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