CSS Equivalent of the "if" statement

Question

Is there any way to use conditional statements in CSS?

Answer 1

I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:

@media screen and (max-width: 300px) {   body {      background-color: lightblue;   } } 

That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).

I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:

<?php   if( A > B ){ echo '<div class="option-a">'; }      else{ echo '<div class="option-b">'; } ?> 

Then your CSS can be like

.option-a { background-color:red; } .option-b { background-color:blue; } 

Answer 2

No. But can you give an example what you have in mind? What condition do you want to check?

Maybe Sass or Compass are interesting for you.

Quote from Sass:

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.