Can CSS Implement Conditional Logic Without if/else Statements?

Can CSS Embody Conditional Logic?

The realm of CSS, or Cascading Style Sheets, does not natively support if/else conditions as seen in traditional programming languages. However, this limitation can be circumvented through various approaches:

1. CSS Classes:

By leveraging HTML classes, you can create different style rules for different scenarios. For instance, the following code assigns distinct background positions based on class:

<p class="normal">Text</p>
<p class="active">Text</p>

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

2. CSS Preprocessors (e.g., Sass):

CSS preprocessors like Sass provide conditional statements that allow for more complex conditions:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

3. CSS Custom Properties (Variables):

Custom properties in CSS behave similarly to variables and are evaluated at runtime:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

4. Server-Side Preprocessing:

Using a server-side language like PHP, you can preprocess CSS files based on dynamic values:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

5. CSS Techniques for UI Logic:

Ahmad Shadeed showcases novel CSS techniques to resolve common UI-based conditional logic without using if/else in his article:
[CSS If/Else](https://www.sitepoint.com/css-ifelse/)

The above is the detailed content of Can CSS Implement Conditional Logic Without if/else Statements?. For more information, please follow other related articles on the PHP Chinese website!