Fundamental Selectors

Type and Universal Selectors

/* Targets all <div> elements */
.container-box {
    color: #2c3e50;
    background-color: #ecf0f1;
}

/* The universal selector applies styles to every element */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Attribute Selectors

Attribute selectors filter elements based on the presence or value of a given attribute.

/* Any <a> tag that has a title attribute */
a[title] {
    text-decoration: underline dotted;
}

/* Inputs whose type is exactly "text" */
input[type="text"] {
    border: 1px solid #bdc3c7;
}

/* Links where href ends with ".pdf" */
a[href$=".pdf"] {
    background: url(icon-pdf.svg) no-repeat right center;
    padding-right: 20px;
}

/* Links where href starts with "https" */
a[href^="https"] {
    color: #27ae60;
}

/* Images whose alt attribute contains "logo" */
img[alt*="logo"] {
    max-height: 50px;
    vertical-align: middle;
}

ID and Class Selectors

/* Targets the element with id="main-nav" */
#main-nav {
    display: flex;
    list-style: none;
}

/* Targets any element with class="highlighted" */
.highlighted {
    background-color: #f1c40f;
    color: #000;
}

Chaining Selectors

Combine a type selector with a class or ID selector without spaces.

/* Only <h3> elements that also have the "post-title" class */
h3.post-title {
    font-weight: 700;
    letter-spacing: 0.5px;
}

Descendant Combinator

Matches an element that is a descendant of another at any depth.

/* All <span> elements anywhere inside an <article> */
article span {
    font-style: italic;
}

/* All paragraphs inside the element with id="content" */
#content p {
    line-height: 1.8;
}

Child Combinator

Selects elements that are direct children of a specified parent.

/* Only list items that are immediate children of <ul> */
ul > li {
    margin-bottom: 0.5em;
}

Sibling Combinators

Subsequent-sibling Combinator

Selects all matching siblings that appear after the first element.

/* All .panel elements placed after .active-panel, sharing the same parent */
.active-panel ~ .panel {
    opacity: 0.6;
}

Adjacent-sibling Combinator

Selects the first matching sibling that immediately follows another.

/* The first <p> directly after any <h2> */
h2 + p {
    font-size: 1.1em;
    margin-top: 0;
}

Selector Lists

Apply the same declaration block to multiple selectors by separating them with commas.

h1, h2, .callout, #alert-box {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

Pseudo-Element Selectors

First-Letter and First-Line

Both require the target element to be block-level.

.intro-paragraph::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 0.1em;
    color: #c0392b;
}

.intro-paragraph::first-line {
    font-weight: 600;
    text-transform: uppercase;
}

Generated Content with ::before and ::after

These pseudo-elements demand the content propetry to render.

.external-link::after {
    content: " ↗";
    font-size: 0.8em;
    vertical-align: super;
}

.callout-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    margin-bottom: 1rem;
}

/* An image can also be inserted via pseudo-elements */
.verified::before {
    content: url(checkmark-badge.svg);
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

Pseudo-Class Selectors

Structural Pseudo-Classes

Target elements based on their position within the document tree.

/* Every third row in a table */
tr:nth-child(3n) {
    background-color: #f8f9fa;
}

/* Even-numbered list items, starting count from the last child */
li:nth-last-child(even) {
    border-bottom: 1px dashed #ccc;
}

/* Longer expressions are valid: 2n+1 targets odd items */
li:nth-child(2n+1) {
    font-weight: bold;
}

/* Convenience shorthands */
section > p:first-child {
    font-size: 1.2em;
}

section > p:last-child {
    margin-bottom: 0;
}

UI State Pseudo-Classes

React to user interactions and element states.

button:hover {
    background-color: #2980b9;
    cursor: pointer;
}

input:focus {
    outline: 2px solid #3498db;
    border-color: transparent;
}

/* Disabled form elements */
input:disabled {
    opacity: 0.5;
    pointer-events: none;
}

The Negation Pseudo-Class

Exclude specific elements from a selection. Chain multiple :not() pseudo-classes to exclude several conditions.

/* All paragraphs except those with class "excluded" */
p:not(.excluded) {
    max-width: 65ch;
}

/* All buttons that are not primary and not disabled */
button:not(.primary):not(:disabled) {
    background: #ecf0f1;
    color: #2c3e50;
}