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

Question

i have an image in the background. i need to decide the color of some divs based on that. How can i achieve it directly in CSS instead of any script Or CSS framework

if (isBackImgTower){
    color:#fff; //(then i want to apply the color #fff)
}
else{
    color:#000;
}

Your question is looking similar to this: http://stackoverflow.com/questions/1129699/can-you-use-if-else-conditions-in-css — Sayed Rafeeq, Jul 27 '16 at 06:23
you are using any server side script? like php,jsp,asp...etc — Naisa purushotham, Jul 27 '16 at 06:36

Jerad Rutnam · Accepted Answer · 2016-07-27T10:05:41.617

4

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;
}

edited Jul 27 '16 at 10:05

answered Jul 27 '16 at 06:27

Jerad Rutnam

1,536
1
14
29

marking it upvote because though the question says it doesnot want to use any framework, but seems to be its not possible and we need to go with any framework. – ismail baig Jul 27 '16 at 06:55
@ismailbaig: Thanks! – Jerad Rutnam Jul 27 '16 at 10:06

score 3 · Answer 2 · answered Jul 27 '16 at 06:22

3

You can't. But you can use this pattern to achieve that:

.background-tower{
    background-image:url('tower.jpg');
}

.background-sky{
    background-image:url('sky.jpg');
}

.background-tower, .background-tower a /* <--a tags inside tower */{
    color:#fff;
}

.background-sky {
    color:#000;
}

And almost your html should be like:

<div class='background-tower'>
    <a href="#">some text</a>
    some other text,...
</div>

answered Jul 27 '16 at 06:22

Mohi

1,776
1
26
39

where is isBackImgTower variable used in your answer. – ismail baig Jul 27 '16 at 06:55
@ismailbaig, I tried to show a pattern instead of correcting the question itself. Like teach fishing. ;) – Mohi Jul 27 '16 at 07:17

score 0 · Answer 3 · answered Jul 27 '16 at 06:32

0

Looking first css medai query. If you cant find your wants, you use jquery or alternative. For example

if ($("#samplediv").attr("data-state") == "a value") {
$("#samplediv").addClass("class-for-a-value");
} else {
$("#samplediv").addClass("class-for-not-a-value");
}

that is a logical change css class. You cannot do it use only css

answered Jul 27 '16 at 06:32

Halit Yurttaş

11
2

And how do you imagine checking background image using media queries? – Justinas Jul 27 '16 at 06:41

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

3 Answers3