Reputation: 125466

Can you use if/else conditions in CSS?

I would like to use conditions in my CSS.

The idea is that I have a variable that I replace when the site is run to generate the right style-sheet.

I want it so that according to this variable the style-sheet changes!

It looks like:

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

Can this be done? How do you do this?

Upvotes: 197

Answers (19)

vsync

Reputation: 130075

Update Jul 2023:

Modern CSS now has @container queries support for size and soon also style & state, and that basically means a native way for an if/else condition. Below is an extremely simplified example.

Note - this technique can only be applied in an hierarchy and not within the same element to style itself according to its own properties.

https://developer.mozilla.org/en-US/docs/Web/CSS/@container#container_style_queries

section {
  width: 100px;
  height: 100px;
  container-name: card;
}

/* imagine a very very deep component */
.super-deep-component {
  height: 100%;
}

@container card style(--foo:1) {
  .super-deep-component { background: LightCyan; }
}

<section style="--foo:1">
  <div class='super-deep-component'></div>
</section>

Limitations of `@container` queries (that I can think of):

require an actual container element
queries conditions do not apply to the "self" (only one of the parents)

Another simple way using `clamp`:

label{ --width: 150 }
input:checked + div{ --width: 400 }

div{
  --isWide: Clamp(0,   (var(--width) - 150) * 99999, 1);
  width: calc(var(--width) * 1px);
  height: 150px;
  border-radius: calc(var(--isWide) * 20px); /* if wide - add radius */
  background: lightgreen;
}

<label>
<input type='checkbox' hidden> 
<div>Click to toggle width</div>
</label>

Best so far:

Update October 2020 - I've found a Chrome bug which I have reported that can affect this method in some situations where specific type of calculations is necessary, but there's a way around it.

Update June 2023 - stopped working due to a Chrome regression issue which I've filed a report for

I have come up with a totally unique method, which is even simpler!

By combining animation paused & duration, it is possible to selectively enable/disable an animation which has a single frame that starts at 0% - a duration of 0s doesn't have an affect, while any greater valuer does, and so, the only keyframes gets rendered permanently (due to the use of paused).

var elm = document.querySelector('div')

// random number between 20 & 80
setInterval(()=>{
 elm.style.setProperty('--width', Math.round(Math.random()*80 + 20))
}, 1000)

:root{
   --color1: salmon;
   --color2: lightgreen;
}

@keyframes wide-container-frames{
  0%{ 
     --height: 160px;
     --radius: 30px;
     --color: var(--color2);
     opacity: .4; /* consider this as additional, never-before, style */
  }
}

@keyframes wide-container-frames--after{
  0%{ 
    content: "true"; 
    color: green; 
  }
}

div{
 --width: 70;           /* must be unitless */
 --height: 80px;
 --radius: 0px;
 --color: var(--color1);
 --widthThreshold: 50;
 --is-width-over-threshold: Min(1, Max(var(--width) - var(--widthThreshold), 0));

 font: 22px Roboto, Arial;
 text-align: center;
 white-space: nowrap;
 
 /* if element is narrower than --widthThreshold */
 width: calc(var(--width) * 1%);
 height: var(--height);
 line-height: var(--height);
 border-radius: var(--radius);
 background: var(--color);

 /* else */
 animation: wide-container-frames calc(var(--is-width-over-threshold) * 1s) paused;
}

/* prints some variables */
div::before{
  counter-reset: aa var(--width);
  content: counter(aa)"% is over 50% width ? ";
}

div::after{
  content: 'false'; 
  font-weight: bold; 
  color: darkred;
  
  /* if element is wider than --widthThreshold */
  animation: wide-container-frames--after calc(var(--is-width-over-threshold) * 1s) paused;
}

<div></div>

Upvotes: 44

Boldewyn

Reputation: 82734

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

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

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

and in your CSS file:

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

That's the CSS way to do it.

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

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

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

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

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

.two {
  background-color: black;
}

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

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

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

On a more high-level note, Ahmad Shadeed shows in this article a lot of very useful techniques to decide if/else questions often coming up in UI development purely within CSS.

Upvotes: 199

Rörd

Reputation: 6681

One option that doesn't seem mentioned in the other answers would be an attribute selector. You could set e.g. a data attribute on a div tag

<div data-var="2">

and then define a selector for divs with the right attribute value as the if case, and a div selector without an attribute selector for the else case:

div[data-var="2"] {
    background-position : 150px 8px;
}
div {
    background-position : 4px 8px;
}

Upvotes: 4

CSSBurner

Reputation: 1991

Besides the answers above, soon another way to directly use if/else -like conditions, and even more closely aligned with other scripting languages, would be via @when / @else conditionals. These conditionals would be implemented to exercise easily recognizable logic chain, for example:

@when supports(display: flex) {
    .container {
        display: flex
    }
} @else media and (min-width: 768px) {
    .container {
        min-width: 768px
    }
} @else {
    .container {
        width: 100%
    }
}

As of February 2022 there is no browser support. Please see this W3C module for more info.

Upvotes: 2

yck

Reputation: 31

CSS has a feature: Conditional Rules. This feature of CSS is applied based on a specific condition. Conditional Rules are:

@supports
@media
@document

Syntax:

@supports ("condition") {

   /* your css style */

}

Example code snippet:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Supports Rule</title> 
    <style>      
        @supports (display: block) { 
            section h1 { 
                background-color: pink; 
                color: white; 
            } 
            section h2 { 
                background-color: pink; 
                color: black; 
            } 
        } 
    </style> 
</head> 
<body> 
    <section> 
        <h1>Stackoverflow</h1> 
        <h2>Stackoverflow</h2> 
    </section> 
</body> 
</html>

Upvotes: 3

amichai

Reputation: 728

You can add container div for all your condition scope.

Add the condition value as a class to the container div. (you can set it by server side programming - php/asp...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

Now you can use the container class as a global variable for all elements in the div using a nested selector, without adding the class to each element.

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}

Upvotes: 2

Peter

Reputation: 3008

I am surprised that nobody has mentioned CSS pseudo-classes, which are also a sort-of conditionals in CSS. You can do some pretty advanced things with this, without a single line of JavaScript.

Some pseudo-classes:

:active - Is the element being clicked?
:checked - Is the radio/checkbox/option checked? (This allows for conditional styling through the use of a checkbox!)
:empty - Is the element empty?
:fullscreen - Is the document in full-screen mode?
:focus - Does the element have keyboard focus?
:focus-within - Does the element, or any of its children, have keyboard focus?
:has([selector]) - Does the element contain a child that matches [selector]? (Sadly, not supported by any of the major browsers.)
:hover - Does the mouse hover over this element?
:in-range/:out-of-range - Is the input value between/outside min and max limits?
:invalid/:valid - Does the form element have invalid/valid contents?
:link - Is this an unvisited link?
:not() - Invert the selector.
:target - Is this element the target of the URL fragment?
:visited - Has the user visited this link before?

Example:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

Upvotes: 49

yeedle

Reputation: 5008

You can use calc() in combination with var() to sort of mimic conditionals:

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

concept

Upvotes: 23

Ondra Žižka

Reputation: 46796

CSS is a nicely designed paradigm, and many of it's features are not much used.

If by a condition and variable you mean a mechanism to distribute a change of some value to the whole document, or under a scope of some element, then this is how to do it:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");

body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}

<body>
<div class="menuItem"></div>
</body>

This way, you distribute the impact of the variable throughout the CSS styles. This is similar to what @amichai and @SeReGa propose, but more versatile.

Another such trick is to distribute the ID of some active item throughout the document, e.g. again when highlighting a menu: (Freemarker syntax used)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;

<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>

<body>
<div class="menuItem"></div>
</body>

Sure,this is only practical with a limited set of items, like categories or states, and not unlimited sets like e-shop goods, otherwise the generated CSS would be too big. But it is especially convenient when generating static offline documents.

One more trick to do "conditions" with CSS in combination with the generating platform is this:

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}

<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>

Upvotes: 8

SeReGa

Reputation: 1317

You can use javascript for this purpose, this way:

first you set the CSS for the 'normal' class and for the 'active' class
then you give to your element the id 'MyElement'
and now you make your condition in JavaScript, something like the example below... (you can run it, change the value of myVar to 5 and you will see how it works)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}

.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }

<div id="MyElement">
  
  </div>

Upvotes: 2

Kyle Lillie

Reputation: 23

If you're open to using jquery, you can set conditional statements using javascript within the html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

This will change the text color of .class to green if the value of Variable is greater than 0.

Upvotes: 0

Kurkula

Reputation: 6762

You can use not instead of if like

.Container *:not(a)
{
    color: #fff;
}

Upvotes: 5

markus

Reputation: 40675

Below is my old answer which is still valid but I have a more opinionated approach today:

One of the reasons why CSS sucks so much is exactly that it doesn't have conditional syntax. CSS is per se completely unusable in the modern web stack. Use SASS for just a little while and you'll know why I say that. SASS has conditional syntax... and a LOT of other advantages over primitive CSS too.

Old answer (still valid):

It cannot be done in CSS in general!

You have the browser conditionals like:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

But nobody keeps you from using Javascript to alter the DOM or assigning classes dynamically or even concatenating styles in your respective programming language.

I sometimes send css classes as strings to the view and echo them into the code like that (php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

Upvotes: 13

Johan

Reputation: 20763

This is a little extra info to the Boldewyn answer above.

Add some php code to do the if/else

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}

Upvotes: 3

josteinaj

Reputation: 497

(Yes, old thread. But it turned up on top of a Google-search so others might be interested as well)

I guess the if/else-logic could be done with javascript, which in turn can dynamically load/unload stylesheets. I haven't tested this across browsers etc. but it should work. This will get you started:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Upvotes: 1

Michiel Buddingh

Reputation: 5919

Yet another option (based on whether you want that if statement to be dynamically evaluated or not) is to use the C preprocessor, as described here.

Upvotes: 2

RaYell

Reputation: 70414

You could create two separate stylesheets and include one of them based on the comparison result

In one of the you can put

background-position : 150px 8px;

In the other one

background-position : 4px 8px;

I think that the only check you can perform in CSS is browser recognition:

Conditional-CSS

Upvotes: 7

beggs

Reputation: 4195

Set the server up to parse css files as PHP and then define the variable variable with a simple PHP statement.

Of course this assumes you are using PHP...

Upvotes: 4

hadi teo

Reputation: 936

As far as i know, there is no if/then/else in css. Alternatively, you can use javascript function to alter the background-position property of an element.

Upvotes: 2

Can you use if/else conditions in CSS?

Answers (19)

Update Jul 2023:

Limitations of @container queries (that I can think of):

Another simple way using clamp:

Best so far:

Related Questions

Limitations of `@container` queries (that I can think of):

Another simple way using `clamp`: