Conditional statements and loops

Conditional Statements and Loops in CSS

Although CSS is primarily used to describe webpage styles, certain features allow it to implement conditional logic and looping similar to programming languages. These features make CSS more powerful and flexible, enabling the application of different styles based on varying conditions or the batch processing of similar style rules.

Conditional Logic in CSS

CSS does not have traditional if-else statements like programming languages, but conditional logic can be achieved through the following methods:

1. Media Queries: Apply different styles based on device characteristics

/* Styles applied when screen width is less than 600px */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

2. Feature Queries: Detect whether a browser supports a specific CSS feature

/* Apply these styles only if the browser supports flexbox */
@supports (display: flex) {
  .nav {
    display: flex;
  }
}

3. Selector Logic: Implement conditional logic through selector combinations

/* Apply styles only when an element has both .active and .highlight classes */
.active.highlight {
  background-color: yellow;
}

Conditional Statements in CSS Preprocessors

CSS preprocessors like Sass/Less provide more powerful conditional statements:

$theme: dark;

body {
  @if $theme == dark {
    background: #333;
    color: white;
  } @else if $theme == light {
    background: white;
    color: #333;
  } @else {
    background: gray;
    color: black;
  }
}

Looping Logic in CSS

Native CSS currently lacks looping structures, but CSS preprocessors offer various looping methods:

1. @for Loop (Sass):

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}

2. @each Loop (iterating through lists):

$colors: red, green, blue, yellow;

@each $color in $colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

3. @while Loop:

$i: 1;
@while $i < 6 {
  .mt-#{$i} {
    margin-top: 5px * $i;
  }
  $i: $i + 1;
}

Combining CSS Variables with Conditional Styles

CSS custom properties (variables) can be combined with conditional logic:

:root {
  --primary-color: #3498db;
  --secondary-color: #e74c3c;
}

.button {
  background-color: var(--primary-color);
}

.button.danger {
  background-color: var(--secondary-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #2980b9;
    --secondary-color: #c0392b;
  }
}

Pseudo-class Selectors for State-based Conditions

CSS pseudo-class selectors apply different styles based on element states:

/* Unvisited links */
a:link {
  color: blue;
}

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

/* Hover state */
a:hover {
  color: red;
}

/* Focus state */
input:focus {
  border-color: green;
}

/* Checked state */
input:checked {
  background-color: yellow;
}

Attribute Selectors for Conditional Styling

Apply different styles based on element attribute values:

/* All links with a target attribute */
a[target] {
  color: orange;
}

/* Links with target="_blank" */
a[target="_blank"] {
  font-weight: bold;
}

/* Links with href starting with https */
a[href^="https"] {
  border-left: 2px solid green;
}

/* Links with href containing "example" */
a[href*="example"] {
  text-decoration: underline;
}

CSS Counters for Looping Effects

While not true loops, CSS counters can create numbered styles:

ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

li::before {
  content: counters(section, ".") " ";
}

Future CSS Conditions and Loops

The CSS Working Group is considering more powerful conditional and looping features:

1. @when Rule (proposal stage):

@when media(width >= 600px) and media(pointer: fine) {
  .card {
    width: 50%;
  }
}

2. Container Queries (partially supported in browsers):

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Practical Application Examples

1. Responsive Grid System:

$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: percentage($i / $columns);
  }
}

@media (max-width: 768px) {
  @for $i from 1 through $columns {
    .col-sm-#{$i} {
      width: percentage($i / $columns);
    }
  }
}

2. Theme Switching System:

$themes: (
  light: (
    bg: white,
    text: black,
    primary: blue
  ),
  dark: (
    bg: #333,
    text: white,
    primary: lightblue
  )
);

@mixin theme($name) {
  $theme: map-get($themes, $name);
  
  body {
    background-color: map-get($theme, bg);
    color: map-get($theme, text);
  }
  
  .btn-primary {
    background-color: map-get($theme, primary);
  }
}

.light-theme {
  @include theme(light);
}

.dark-theme {
  @include theme(dark);
}

3. Animation Sequence:

@for $i from 1 through 5 {
  .item-#{$i} {
    animation: fadeIn 0.5s ease-in-out #{$i * 0.2}s forwards;
    opacity: 0;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}