Can You Use If/Else Conditions in Css

Can you use if/else conditions in CSS?

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.

can we give if else condition in css without using any framework

Simply NO. CSS does not support logics.

So you will need a css preprocessor like SASS/SCSS for simple logics like this.

Sample SCSS [This might not give the exact answer - But just to get an idea],

$isBackImgTower: true;

div {
  @if $isBackImgTower == true {
    color: #fff; 
  } @else {
    color: #000;
  }
}

But why not simply use a class with background-image property? Is there any reason?

Example,

div {
    color: #000;
}
div.isBackImgTower {
    background-image:url('images/tower.jpg');
    color: #fff;
}

If else statements in CSS?

There are no real if/else statements in CSS, you can just use media queries and define your css depending on the width of the window like this:

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

if the window is smaller than 600px, the background color is set to lightblue. You can use several queries like min-width and max-width to define your CSS. Just have a look at:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

CSS Equivalent of the if statement

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.

Use CSS in Conditional Statements

I don't know if I have quite understand what you want to do but here is the solution on what I have understood.

If you want to show hide on if and else then with jQuery you can use like this

if(true){
  $('.myClass').show();
}else{
  $('.myClass').hide();
}

If you want to use with PHP and CSS then add a class in div and write a css
e.g :

CSS

.myClass.show{
  display:block;
}
.myClass.hide{
  display:none;
}

PHP

<?php
$val = 'show';

  if(false){
    $val = 'hide';
  } 
?>

<div class="myClass <?php echo $val ?>">Text </div>

How to apply conditional css?

<div [className]="'example-class'"></div>

This allows us to add classes based on a condition:

<div [className]="condition ? 'example-class' : 'other-class'"></div>

Or we could build the class name at runtime:

<div [className]="'class' + someValue"></div>

we can easily toggle CSS classes like so:

<div [class.example-class]="condition"></div>

we can assign a variable class name :

<div [ngClass]="seleted-class"></div>

NgClass can also assign multiple static class names all at once:

We can also use ngClass to assign multiple CSS classes based on multiple conditions.

<div
  [ngClass]="{
  'example-class': condition,
  'other-class': !condition
}"
></div>


<div [ngClass]="['example-class', 'other-class']"></div>

source : https://malcoded.com/posts/angular-ngclass/

---

Related Topics