Logic in CSS: the `if()` function and style queries

Introduce native conditional logic into your style sheets. Learn how to switch properties based on variable values without writing a line of JavaScript.

How much do you know about CSS?

📘 Theory

The conditional `if()` function

Syntax: condition ? true value : false value.

The `if()` function lets you assign a property value based on a logical test. Its shape is similar to the ternary operator in JavaScript: `if( ? : )`.

That is especially useful for component states. You can define a variable such as `--size` and let `if()` decide the `padding`, `font-size` or `border-radius` without creating extra classes like `.btn--small` or `.btn--large`.

The important idea is that `if()` works best alongside custom properties, making CSS feel more programmable and less repetitive.

Style queries

`@container style(--variable: value)`

Traditional container queries inspect the size of the parent. Style queries inspect the style of the parent. If a container exposes `--theme: dark`, its children can react automatically.

That solves many context problems. Instead of selectors such as `.dark-mode .card .title`, the component can ask whether it lives inside a dark context and adjust itself accordingly.

The base syntax is `@container style(--featured: true) { ... }`. This makes components aware of their environment in a more granular and reusable way.

1 The conditional `if()` function 2 Style queries

🧪 Learn by doing

Example Demo: the intelligent component Change the variable value in the CSS and see how the button reacts through internal logic without modifying the HTML.

⌄

Example Challenge: context adaptation We have a weather widget. If the container exposes `--weather: rainy`, turn the icon blue. If it is `--weather: sunny`, turn it orange.

⌄

🧰 Resources

Useful links

Chrome for Developers - CSS `if()` MDN - CSS Container Style Queries MDN CSS MDN Layout Cookbook

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 60

CSS math functions: `calc()`, `min()`, `max()` and `clamp()`

Lesson 62

Cascade Layers (`@layer`): organize priority without specificity wars

›