CSS Selectors Cheat Sheet

/* Resets margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styles all paragraph elements */
p {
    font-size: 16px;
    line-height: 1.6;
}

/* Styles all h1 headings */
h1 {
    color: #333;
    font-size: 2em;
}

/* Selects elements with class="button" */
.button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
}

/* Multiple classes */
.button.primary {
    background: #28a745;
}

/* Selects element with id="header" */
#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Selects all elements with a title attribute */
[title] {
    cursor: help;
    border-bottom: 1px dotted;
}

/* Selects all inputs with a required attribute */
input[required] {
    border-color: red;
}

/* Selects all 
 inside 
, at any depth */
div p {
    color: blue;
}

/* Selects all  inside elements with class="container" */
.container span {
    font-weight: bold;
}

/* Selects only direct 
 children of 
 */
ul > li {
    list-style: square;
}

/* Does not select nested 
 elements */
.menu > li {
    display: inline-block;
}

/* Selects the first 
 immediately after 
 */
h2 + p {
    font-size: 1.2em;
    margin-top: 0;
}

/* Selects label immediately after checked input */
input:checked + label {
    color: green;
}

/* Selects all 
 elements that follow 
 */
h2 ~ p {
    color: gray;
}

/* Selects all sibling divs after .intro */
.intro ~ div {
    margin-top: 20px;
}

/* Selects inputs with type="text" */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Selects links with specific target */
a[target="_blank"] {
    padding-right: 15px;
}

/* Selects elements with class attribute containing "button" */
[class~="button"] {
    cursor: pointer;
}

/* HTML: 
 */

/* Selects elements with lang attribute starting with "en" */
[lang|="en"] {
    quotes: '"' '"';
}

/* Matches: lang="en", lang="en-US", lang="en-GB" */

/* Selects links starting with "https" */
a[href^="https"] {
    padding-left: 20px;
}

/* Selects elements with class starting with "icon-" */
[class^="icon-"] {
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* Selects links to PDF files */
a[href$=".pdf"] {
    background: url(pdf-icon.png) no-repeat right;
}

/* Selects images with .jpg extension */
img[src$=".jpg"] {
    border: 2px solid gold;
}

/* Selects links containing "google" in href */
a[href*="google"] {
    color: #4285f4;
}

/* Selects elements with class containing "btn" */
[class*="btn"] {
    padding: 8px 16px;
}

/* Change color on hover */
a:hover {
    color: red;
    text-decoration: underline;
}

button:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Highlight focused input */
input:focus {
    border-color: #007bff;
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Style while clicking */
button:active {
    transform: scale(0.95);
    background: #003d82;
}

/* Style visited links */
a:visited {
    color: purple;
}

/* Highlight form when any input is focused */
form:focus-within {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.search-box:focus-within {
    border-color: #007bff;
}

/* Show outline only for keyboard navigation */
button:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Hide default focus for mouse clicks */
button:focus:not(:focus-visible) {
    outline: none;
}

/* Style first list item */
li:first-child {
    font-weight: bold;
}

p:first-child {
    margin-top: 0;
}

/* Remove margin from last paragraph */
p:last-child {
    margin-bottom: 0;
}

.menu li:last-child {
    border-right: none;
}

/* Select every odd row */
tr:nth-child(odd) {
    background: #f5f5f5;
}

/* Select every 3rd element */
li:nth-child(3n) {
    color: red;
}

/* Select first 3 elements */
div:nth-child(-n+3) {
    font-weight: bold;
}

/* Select element at position 5 */
p:nth-child(5) {
    color: blue;
}

/* Select last 2 elements */
li:nth-last-child(-n+2) {
    font-style: italic;
}

/* Select second from last */
div:nth-last-child(2) {
    border-bottom: 2px solid blue;
}

/* Select every 2nd paragraph (ignoring other elements) */
p:nth-of-type(2n) {
    color: gray;
}

/* Select first h2 heading */
h2:nth-of-type(1) {
    color: red;
}

/* Select last 3 paragraphs */
p:nth-last-of-type(-n+3) {
    background: lightyellow;
}

/* Style first paragraph in each section */
section p:first-of-type {
    font-size: 1.2em;
}

/* Remove margin from last paragraph */
article p:last-of-type {
    margin-bottom: 0;
}

/* Style only if it's the sole child */
li:only-child {
    list-style: none;
}

p:only-child {
    text-align: center;
}

/* Style if only one paragraph exists */
p:only-of-type {
    color: blue;
}

/* Hide empty elements */
div:empty {
    display: none;
}

/* Add placeholder for empty cells */
td:empty::before {
    content: "—";
    color: #999;
}

/* Style checked checkbox */
input[type="checkbox"]:checked {
    accent-color: green;
}

/* Custom checkbox using :checked + label */
input:checked + label {
    color: green;
    font-weight: bold;
}

/* Style disabled inputs */
input:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Style enabled inputs */
input:enabled {
    border: 1px solid #ccc;
}

/* Highlight required fields */
input:required {
    border-left: 3px solid red;
}

/* Add asterisk to required field labels */
label:has(+ input:required)::after {
    content: " *";
    color: red;
}

/* Style optional fields differently */
input:optional {
    border-left: 3px solid gray;
}

/* Green border for valid input */
input:valid {
    border-color: green;
}

/* Show checkmark for valid email */
input[type="email"]:valid {
    background: url(checkmark.svg) no-repeat right center;
}

/* Red border for invalid input */
input:invalid {
    border-color: red;
}

/* Show error icon */
input:invalid:not(:placeholder-shown) {
    background: url(error.svg) no-repeat right center;
}

/* Style when placeholder is visible */
input:placeholder-shown {
    border-color: #ccc;
}

/* Validate only when user has entered something */
input:not(:placeholder-shown):invalid {
    border-color: red;
}

/* Define global CSS variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-size: 16px;
}

/* Use variables */
button {
    background: var(--primary-color);
    font-size: var(--font-size);
}

/* Highlight section when linked via #section-id */
:target {
    background: yellow;
    animation: highlight 2s;
}

/* Style targeted heading */
h2:target {
    color: red;
    border-left: 4px solid red;
}

/* Select all inputs except submit buttons */
input:not([type="submit"]) {
    border: 1px solid #ccc;
}

/* Select all paragraphs except first */
p:not(:first-child) {
    margin-top: 1em;
}

/* Multiple selectors in :not() */
button:not(.primary):not(.secondary) {
    background: gray;
}

/* Add icon before links */
a::before {
    content: "🔗 ";
}

/* Add opening quote */
blockquote::before {
    content: open-quote;
    font-size: 2em;
    color: #999;
}

/* Decorative element */
.button::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: white;
    margin-right: 5px;
}

/* Add arrow after links */
a[target="_blank"]::after {
    content: " ↗";
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Add required indicator */
.required::after {
    content: " *";
    color: red;
}

/* Style first line of paragraphs */
p::first-line {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
}

article::first-line {
    text-transform: uppercase;
}

/* Drop cap effect */
p::first-letter {
    font-size: 3em;
    font-weight: bold;
    float: left;
    line-height: 1;
    margin-right: 5px;
    color: #e94560;
}

.intro::first-letter {
    background: #007bff;
    color: white;
    padding: 5px;
}

/* Custom text selection color */
::selection {
    background: #007bff;
    color: white;
}

/* Firefox requires vendor prefix */
::-moz-selection {
    background: #007bff;
    color: white;
}

p::selection {
    background: yellow;
    color: black;
}

/* Style placeholder text */
input::placeholder {
    color: #999;
    font-style: italic;
    opacity: 1;
}

textarea::placeholder {
    color: #aaa;
    font-size: 0.9em;
}

/* Style list markers */
li::marker {
    color: #e94560;
    font-size: 1.2em;
    font-weight: bold;
}

ul li::marker {
    content: "✓ ";
}

ol li::marker {
    font-family: 'Georgia', serif;
}

/* Style dialog backdrop */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

/* Style fullscreen video backdrop */
video:fullscreen::backdrop {
    background: black;
}

/* Without :is() - repetitive */
h1 a, h2 a, h3 a {
    color: blue;
}

/* With :is() - cleaner */
:is(h1, h2, h3) a {
    color: blue;
}

/* Complex example */
:is(.header, .footer, .sidebar) :is(h2, h3) {
    font-family: 'Arial', sans-serif;
}

/* Multiple contexts */
:is(article, section) :is(p, li) {
    line-height: 1.6;
}

/* Zero specificity - easy to override */
:where(h1, h2, h3) {
    color: gray;
}

/* This will override the above despite lower selector count */
h1 {
    color: red;
}

/* Default link styles (easy to override) */
:where(a:not([class])) {
    color: blue;
    text-decoration: underline;
}

/* Reset with zero specificity */
:where(ul, ol) {
    list-style: none;
    padding: 0;
}

/* Single selector (all browsers) */
button:not(.primary) {
    background: gray;
}

/* Multiple selectors (modern browsers) */
input:not([type="submit"], [type="reset"], [type="button"]) {
    border: 1px solid #ccc;
}

/* Exclude multiple classes */
div:not(.header, .footer, .sidebar) {
    padding: 20px;
}

/* Complex negation */
li:not(:first-child):not(:last-child) {
    border-top: 1px solid #eee;
}

/* Select parent if it contains specific child */
div:has(> img) {
    display: grid;
    place-items: center;
}

/* Style form if it has invalid input */
form:has(:invalid) {
    border: 2px solid red;
}

/* Card with image vs without */
.card:has(img) {
    display: flex;
}

.card:not(:has(img)) {
    text-align: center;
}

/* Style article if it has h2 heading */
article:has(h2) {
    margin-top: 2em;
}

/* Select label for checked checkbox */
label:has(+ input:checked) {
    font-weight: bold;
    color: green;
}

/* Complex example - parent of hovered element */
ul:has(> li:hover) {
    background: #f0f0f0;
}

/* (0, 1, 0, 0) - ID wins */
#header {
    color: red;
}

/* (0, 0, 1, 1) - Class + element loses to ID */
div.header {
    color: blue;
}

/* This CSS rule... */
#id .class p {
    color: blue;
}

/* ...will be overridden by inline style */
<p style="color: red;">Red text</p>

/* Low specificity but wins due to !important */
p {
    color: red !important;
}

/* High specificity but loses */
#id .class p {
    color: blue;
}

/* Only another !important with higher/equal specificity can override */
#id p {
    color: green !important;
}

/* Traditional CSS */
.card {
    padding: 20px;
}

.card h2 {
    color: red;
}

.card p {
    color: gray;
}

/* With CSS Nesting */
.card {
    padding: 20px;

    h2 {
        color: red;
    }

    p {
        color: gray;
    }
}

/* Pseudo-classes and pseudo-elements require & */
.button {
    background: blue;

    &:hover {
        background: darkblue;
    }

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

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

/* Modifiers */
.button {
    padding: 10px;

    &.primary {
        background: green;
    }

    &.secondary {
        background: gray;
    }
}

.card {
    background: white;

    /* .card.featured */
    &.featured {
        border: 2px solid gold;
    }

    /* .card[data-state="active"] */
    &[data-state="active"] {
        box-shadow: 0 0 10px blue;
    }

    /* .card:not(.disabled) */
    &:not(.disabled) {
        cursor: pointer;
    }
}

.navigation {
    background: #333;

    ul {
        list-style: none;

        li {
            display: inline-block;

            a {
                color: white;

                &:hover {
                    color: yellow;
                }
            }
        }
    }
}

/* Compiles to:
   .navigation { background: #333; }
   .navigation ul { list-style: none; }
   .navigation ul li { display: inline-block; }
   .navigation ul li a { color: white; }
   .navigation ul li a:hover { color: yellow; }
*/

.sidebar {
    width: 300px;

    @media (max-width: 768px) {
        width: 100%;
    }

    h2 {
        font-size: 1.5em;

        @media (max-width: 768px) {
            font-size: 1.2em;
        }
    }
}

.theme-dark {
    background: black;

    .button {
        background: #333;
        color: white;
    }
}

/* Alternative using & for specificity */
.button {
    background: white;
    color: black;

    .theme-dark & {
        background: #333;
        color: white;
    }
}

/* Compiles to: .theme-dark .button { ... } */