CSS Selectors and Syntax

/* Comment describing the rule */
.container {
    /* Property: Value pairs */
    display: flex;
    padding: 20px;
    background-color: #f0f0f0;
}

/* Multiple selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Universal - affects all elements */
* { box-sizing: border-box; }

/* Element selector */
p { color: #333; }

/* Class selector */
.alert { background: yellow; }

/* ID selector */
#main-nav { position: fixed; }

/* Multiple classes */
.btn.primary { background: blue; }

/* Element with class */
button.submit { font-weight: bold; }

/* Descendant - any level */
.container p { padding: 10px; }

/* Direct child only */
nav > ul { list-style: none; }

/* Adjacent sibling - immediately after */
label + input { margin-left: 10px; }

/* General siblings - all after */
h2 ~ p { color: gray; }

/* Complex combination */
article > header + section p { line-height: 1.6; }

/* Has attribute */
input[required] { border-color: red; }

/* Exact value */
input[type="email"] { background: #f0f0f0; }

/* Starts with */
a[href^="https://"] { color: green; }
a[href^="http://"] { color: orange; }

/* Ends with */
a[href$=".pdf"]::after { content: " (PDF)"; }

/* Contains */
img[src*="thumbnail"] { width: 100px; }

/* Case insensitive */
[data-state="active" i] { font-weight: bold; }

/* Multiple attributes */
input[type="text"][required] { border: 2px solid red; }

/* User interaction pseudo-classes */
a:hover { color: blue; }
button:active { transform: scale(0.95); }
input:focus { outline: 2px solid blue; }

/* Structural pseudo-classes */
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f0f0f0; }
tr:nth-child(odd) { background: white; }
p:not(.special) { color: gray; }

/* Form state pseudo-classes */
input:disabled { opacity: 0.5; }
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Pseudo-elements */
.quote::before { content: "❝"; }
.quote::after { content: "❞"; }
p::first-letter { font-size: 2em; float: left; }
::selection { background: yellow; color: black; }

/* Specificity: 0,0,1 */
p { color: black; }

/* Specificity: 0,1,0 - wins over above */
.text { color: blue; }

/* Specificity: 0,1,1 - wins over .text */
p.text { color: green; }

/* Specificity: 1,0,0 - wins over all above */
#main { color: red; }

/* !important overrides specificity */
p { color: purple !important; } /* Wins over everything */

/* Equal specificity - last rule wins */
.box { color: blue; }
.box { color: red; } /* This applies */

/* Traditional approach - verbose */
header a:hover,
footer a:hover,
aside a:hover {
    color: blue;
}

/* Using :is() - much shorter */
:is(header, footer, aside) a:hover {
    color: blue;
}

/* Specificity example */
:is(#id, .class) { } /* Specificity: 1,0,0 (from #id) */
:where(#id, .class) { } /* Specificity: 0,0,0 */

/* Library/framework base styles with 0 specificity */
:where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-weight: bold;
}

/* User styles easily override without !important */
h1 { margin: 20px 0; } /* Overrides above */

/* Use case: default styles that are easy to override */
:where(.btn) {
    padding: 10px;
    border: none;
}
.btn { padding: 20px; } /* Easily overrides */

/* Style parent based on child */
article:has(> img) {
    display: grid;
}

/* Form with invalid input */
form:has(input:invalid) {
    border: 2px solid red;
}

/* Card with .featured class inside */
.card:has(.featured) {
    background: gold;
}

/* List item containing link */
li:has(> a) {
    cursor: pointer;
}

/* Previous sibling selector (works with :has) */
li:has(+ li:hover) {
    color: blue;
}

/* Conditional layout */
section:has(> .sidebar) {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

/* All paragraphs except .special */
p:not(.special) {
    color: gray;
}

/* Multiple negations (CSS4) */
button:not(.primary):not(.secondary) {
    background: white;
}

/* Not with attribute */
input:not([type="submit"]) {
    border: 1px solid gray;
}

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