Can you use if else conditions in CSS

Question

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

User · Answer

I ve devised the below demo using a mix of tricks which allows simulating if else scenarios for some properties  Any property which is numerical in its essence is easy target for this method  but properties with text values are  This code has 3 if else scenarios  for opacity  background color  amp  width  All 3 are governed by two Boolean variables bool and its opposite notBool  Those two Booleans are the key to this method  and to achieve a Boolean out of a none-boolean dynamic value  requires some math which luckily CSS allows using min  amp  max functions  Obviously those functions  min max  are supported in recent browsers  versions which also supports CSS custom properties  variables    x000D   x000D  var elm   document querySelector  div    setInterval     gt     elm style setProperty  --width   Math round Math random   80   20      1000  x000D   root     --color1  lightgreen     --color2  salmon     --width  70      starting value  randomly changed by javascript every 1 second       div   --widthThreshold  50   --is-width-above-limit  Min 1  Max var --width  - var --widthThreshold   0     --is-width-below-limit  calc 1 - var --is-width-above-limit       --opacity-wide   4         if width is ABOVE 50     --radius-narrow  10px      if width is BELOW 50     --radius-wide  60px        if width is ABOVE 50     --height-narrow  80px      if width is ABOVE 50     --height-wide  160px       if width is ABOVE 50       --radiusToggle  Max var --radius-narrow   var --radius-wide    var --is-width-above-limit     --opacityToggle  calc calc 1   var --opacity-wide   - var --is-width-above-limit     --colorsToggle  var --color1  calc 100    var --is-width-above-limit                      var --color2  calc 100    var --is-width-above-limit                      var --color2  calc 100     1 - var --is-width-above-limit         --height  Max var --height-wide    var --is-width-above-limit   var --height-narrow       height  var --height    text-align  center   line-height  var --height     width  calc var --width    1     opacity  var --opacityToggle    border-radius  var --radiusToggle    background  linear-gradient var --colorsToggle      transition   3s        prints some variables    div  before    counter-reset  aa var --width     content  counter aa         div  after    counter-reset  bb var --is-width-above-limit     content    is over 50     counter bb     x000D   lt div gt  lt  div gt  x000D   x000D   x000D   Another simply way using clamp   x000D   x000D  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    x000D   lt label gt   lt input type  checkbox  hidden gt    lt div gt Click to toggle width lt  div gt   lt  label gt  x000D   x000D   x000D   Best so far  I have come up with a totally unique method  which is even simpler  This method is so cool because it is so easy to implement and also to understand  it is based on animation step   function  Since bool can be easily calculated as either 0 or 1  this value can be used in the step  if only a single step is defined  then the if else problem is solved  Using the keyword forwards persist the changes   x000D   x000D  var elm   document querySelector  div    setInterval     gt     elm style setProperty  --width   Math round Math random   80   20      1000  x000D   root     --color1  salmon     --color2  lightgreen      keyframes if-over-threshold--container    to        --height  160px       --radius  30px       --color  var --color2        opacity   4     consider this as additional  never-before  style            keyframes if-over-threshold--after    to       content   true        color  green          div   --width  70               must be unitless     --height  80px   --radius  10px   --color  var --color1    --widthThreshold  50   --is-width-over-threshold  Min 1  Max var --width  - var --widthThreshold   0        text-align  center   white-space  nowrap   transition   3s        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  if-over-threshold--container forwards steps var --is-width-over-threshold          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  if-over-threshold--after forwards steps var --is-width-over-threshold       x000D   lt div gt  lt  div gt  x000D   x000D   x000D    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  https   bugs chromium org p chromium issues detail id 1138497

User · Answer

You can use not instead of if like    Container   not a        color   fff

User · Answer

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       lt  --container div-- gt   lt div class  true-value  gt      lt  -- your content -- gt      lt p gt my content lt  p gt      lt p gt my content lt  p gt      lt p gt my content lt  p gt   lt  div gt    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

User · Answer

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

User · Answer

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    x000D   x000D  div   color  white  background  red   x000D  input checked   div   background  green   x000D   lt input type checkbox gt Click me  x000D   lt div gt Red or green  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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   quot condition quot            your css style        Example code snippet   x000D   x000D   lt  DOCTYPE html gt    lt html gt    lt head gt        lt title gt Supports Rule lt  title gt        lt style gt                 supports  display  block                 section h1                    background-color  pink                   color  white                              section h2                    background-color  pink                   color  black                                  lt  style gt    lt  head gt    lt body gt        lt section gt            lt h1 gt Stackoverflow lt  h1 gt            lt h2 gt Stackoverflow lt  h2 gt        lt  section gt    lt  body gt    lt  html gt   x000D   x000D   x000D

User · Answer

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

User · Answer

This is a little extra info to the Boldewyn answer above   Add some php code to do the if else  if  x  1     print   lt p class   normal   gt Text lt  p gt  n     else     print   lt p class   active   gt Text lt  p gt  n

User · Answer

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    x000D   x000D  var myVar   4  x000D  document body className    myVar    5    active     normal    x000D  body active  menuItem   x000D    background-position   150px 8px  x000D    background-color  black  x000D    x000D  body normal  menuItem   x000D    background-position   4px 8px   x000D    background-color  green  x000D    x000D   lt body gt  x000D   lt div class  menuItem  gt  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    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    x000D   x000D  var chosenCategory   15  x000D  document body className    category    chosenCategory  x000D   lt  list categories as cat  gt  x000D      body category  cat id   menuItem   font-weight  bold    x000D   lt   list gt  x000D   lt body gt  x000D   lt div class  menuItem  gt  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    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    x000D   x000D   myList   x000D        Default list formatting    x000D    x000D   myList count0   x000D        Hide the list when there is no item     x000D     display  none  x000D    x000D   myList count1   x000D        Special treatment if there is just 1 item    x000D     color  gray  x000D    x000D   lt ul class  myList count  items size     gt  x000D   lt  -- Iterate list s items here -- gt  x000D   lt li gt Something    lt  div gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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     lt div id  myid  class   lt  php echo  this- gt cssClass    gt   gt content lt  div gt

User · Answer

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

User · Answer

You can use php if you write css in the  Tag   lt style gt      section           position  fixed          top   lt  php if   test     tset    echo  10px       gt          lt  style

User · Answer

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     x000D   x000D  var myVar   4  x000D   x000D  if myVar    5   x000D    document getElementById  MyElement   className    active   x000D    x000D  else  x000D    document getElementById  MyElement   className    normal   x000D    x000D   active  x000D    background-position   150px 8px  x000D    background-color  black  x000D    x000D   normal  x000D    background-position   4px 8px   x000D    background-color  green  x000D    x000D  div  x000D    width  100px  x000D    height  100px  x000D      x000D   lt div id  MyElement  gt  x000D     x000D     lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

If you re open to using jquery  you can set conditional statements using javascript within the html       class   css  color    Variable  gt  0      009933    000       This will change the text color of  class to green if the value of Variable is greater than 0

User · Answer

Not in the traditional sense  but you can use classes for this  if you have access to the HTML  Consider this    lt p class  normal  gt Text lt  p gt    lt p class  active  gt Text lt  p gt    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   lt  php echo     GET  foo       bar     150     4     gt px 8px      In this case  you will however have a performance impact  since caching such a stylesheet will be difficult

[css] Can you use if/else conditions in CSS?

Another simply way using `clamp`:

Best so far:

Examples related to css

Examples related to stylesheet

Examples related to conditional-statements