Conditions in CSS

CSS doesn’t have traditional programming if/else, but it has multiple ways to apply styles conditionally.

Below are all major approaches — old and new — with syntax, example, and when to use it.

⸻

1) Media Queries (@media)

What It Does

Applies styles based on viewport or device conditions (width, height, orientation, dark mode preference, etc).

Syntax

@media (condition) {
  /* rules */
}

Example

body {
  font-size: 16px;
}

@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

When To Use It

Use media queries when:

• Building responsive layouts
• Changing layout based on screen size
• Supporting dark mode (prefers-color-scheme)
• Adapting for reduced motion

Example:

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

👉 Use this when your condition depends on the device or viewport.

⸻

2) Feature Queries (@supports)

What It Does

Applies styles only if the browser supports a feature.

Syntax

@supports (property: value) {
  /* rules */
}

Example

.box {
  display: block;
}

@supports (display: grid) {
  .box {
    display: grid;
  }
}

When To Use It

Use @supports when:

• Using modern features but need fallbacks
• Migrating legacy CSS safely
• Progressive enhancement

👉 Use this when your condition depends on browser capability.

⸻

3) Container Queries (@container)

What It Does

Applies styles based on the size of a parent container, not the viewport.

Syntax

@container (min-width: 500px) {
  /* rules */
}

Setup Required

.card {
  container-type: inline-size;
}

Example

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-title {
    font-size: 1.5rem;
  }
}

When To Use It

Use container queries when:

• Building reusable components
• Creating layout-aware UI components
• Avoiding global viewport breakpoints

👉 Use this when your condition depends on component size, not screen size.

⸻

4) Conditional Selectors (:has, :checked, etc.)

What They Do

Apply styles based on structure or state.

⸻

:has() Example

.card:has(img) {
  border: 2px solid #ccc;
}

Styles .card only if it contains an image.

⸻

State Example

input:checked + label {
  color: green;
}

Label changes only when checkbox is checked.

⸻

When To Use Them

Use selectors when:

• Styling based on DOM structure
• Reacting to form states
• Styling parents based on children (:has())

👉 Use this when your condition depends on HTML structure or state.

⸻

5) Custom Properties as Conditions (Indirect)

You can simulate logic using variables.

:root {
  --size: 1rem;
}

.box {
  font-size: var(--size);
}

Combined with media queries:

@media (min-width: 768px) {
  :root {
    --size: 1.5rem;
  }
}

When To Use

• Theming
• Design systems
• Centralized control of styles

⸻

6) The New if() Function

CSS now includes an inline conditional function: if().

It allows value selection inside a single declaration.

Note: Support is currently limited (modern Chromium-based browsers).

⸻

Syntax

property: if(
  condition-1: value-1;
  condition-2: value-2;
  else: fallback
);

⸻

Example 1 — Media Condition Inline

.container {
  padding: if(
    media(min-width: 800px): 3rem;
    else: 1rem
  );
}

⸻

Example 2 — Based on Custom Property

:root {
  --theme: dark;
}

body {
  background: if(
    style(--theme: dark): black;
    else: white
  );
}

⸻

When To Use if()

Use if() when:

• You want inline conditional values
• Avoiding duplicate selectors
• Writing more expressive single-property logic
• Creating dynamic design tokens

👉 Use this when you want true value-level conditional logic inside a declaration.

⸻

Quick Comparison

⸻

Final Recap

CSS conditions evolved like this:

1. Viewport logic → @media
2. Feature detection → @supports
3. Component-aware layouts → @container
4. Structural/state logic → selectors like :has
5. Value-level logic → if()

If you remember one thing:

• Use media queries for screens.
• Use container queries for components.
• Use supports for browser safety.
• Use selectors for structure/state.
• Use if() when you need real inline conditional values.