CSS Equivalent of the if statement

Question

Is there any way to use conditional statements in CSS

User · Accepted Answer

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

User · Answer

CSS itself doesn t have conditional statements  but here s a hack involving custom properties  a k a   css variables     In this trivial example  you want to apply a padding based on a certain condition   like an  if  statement    root     --is-big  0      is-big   --is-big  1      block     padding  calc      4rem   var --is-big        1rem    1 - var --is-big            So any  block that s an  is-big or that s a descendant of one will have a padding of 4rem  while all other blocks will only have 1rem  Now I call this a  trivial  example because it can be done without the hack    block     padding  1rem      is-big  block   block is-big     padding  4rem      But I will leave its applications to your imagination

User · Answer

css files do not support conditional statements   If you want something to look one of two ways  depending on some condition  give it a suitable class using your server side scripting language or javascript  eg   lt div class  oh-yes  gt  lt  div gt   lt div class  hell-no  gt  lt  div gt

User · Answer

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    lt  php   if  A  gt  B    echo   lt div class  option-a  gt           else  echo   lt div class  option-b  gt        gt    Then your CSS can be like   option-a   background-color red     option-b   background-color blue

User · Answer

The only conditions available in CSS are selectors and  media  Some browsers support some of the CSS 3 selectors and media queries   You can modify an element with JavaScript to change if it matches a selector or not  e g  by adding a new class

User · Answer

Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display  The logic should be in your javascript and html  use javascript to dynamically apply attributes based on conditions if you really need to  Stylesheets are not the place for logic

User · Answer

I would argue that you can use if statements in CSS  Although they aren t worded as such  In the example below  I ve said that if the check-box is checked I want the background changed to white  If you want to see a working example check out www armstrongdes com  I built this for a client  Re size your window so that the mobile navigation takes over and click the nav button  All CSS  I think it s safe to say this concept could be used for many things           sidebartoggler checked    page-wrap  hamb           background   fff              example set as if statement sudo code   if  sidebaretoggler is checked    true    set the background color of  hamb to white

User · Answer

There is no native IF ELSE for CSS available  CSS preprocessors like SASS  and Compass  can help  but if you   re looking for more feature-specific if else conditions you should give Modernizr a try  It does feature-detection and then adds classes to the HTML element to indicate which CSS3  amp  HTML5 features the browser supports and doesn   t support  You can then write very if else-like CSS right in your CSS without any preprocessing  like this    geolocation  someElem         only apply this if the browser supports Geolocation       no-geolocation  someElem         only apply this if the browser DOES NOT support Geolocation        Keep in mind that you should always progressively enhance  so rather than the above example  which illustrates the point better   you should write something more like this    someElem         default styles  suitable for both Geolocation support and lack thereof       geolocation  someElem         only properties as needed to overwrite the default styling         Note that Modernizr does rely on JavaScript  so if JS is disabled you wouldn   t get anything  Hence the progressive enhancement approach of  someElem first  as a no-js foundation

User · Answer

Changing your css file to a scss file would allow you to do the trick  An example in Angular would be to use an ngClass and your scss would look like      sidebar       height  100       width  60px        amp  is-open           width  150px

User · Answer

No you can t do if in CSS  but you can choose which style sheet you will use  Here is an example      lt  -- if IE 6  gt  Special instructions for IE 6 here  lt   endif -- gt    will use only for IE 6 here is the website where it is from http   www quirksmode org css condcom html   only IE has conditional comments  Other browser do not  although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit  You can use javascript to detect which browser you re using and use javascript if for whatever actions you want to perform but that is a bad idea  since it can be disabled

User · Answer

The  supports rule  92  browser support July 2017  rule can be used for conditional logic on css properties    supports  display  -webkit-box         for older webkit browser   display  -webkit-box       supports not  display  -webkit-box         newer browsers   display  flex

User · Answer

CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do There is a hack in CSS for using conditional statements logic  It involves using the symbol     Let me further illustrate with an example  Let s say you want a background to slide into the page when a button is clicked  All you need to do is use a radio checkbox  Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed  Then you use the code below  checkbox checked    background  opacity 1 width  100     This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is

[css] CSS Equivalent of the "if" statement

Examples related to css