CSS Selectors and Pseudo-classes

Code

/* Pseudo-classes */
a:hover { color: red; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-elements */
p::first-letter { font-size: 2em; }
p::before { content: "> "; }
input::placeholder { color: #999; }

/* Attribute selectors */
input[type="email"] { padding: 8px; }
a[href^="https"] { color: green; }
a[href$=".pdf"] { color: red; }
a[class*="btn"] { cursor: pointer; }

/* Combinators */
.parent > .child { margin: 4px; }       /* direct child */
.sibling + .next { margin-top: 8px; }   /* adjacent */
.sibling ~ .later { color: gray; }      /* general sibling */

Explanation

Covers pseudo-classes (:hover, :focus, :first-child, :nth-child), pseudo-elements (::first-letter, ::before, ::placeholder), attribute selectors, and combinators (child >, adjacent +, sibling ~). Attribute selectors match by exact value, prefix (^=), suffix ($=), or substring (*=). Combinators define relationships between elements in the document tree.

More CSS Snippets