Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
if/else condition in CSS
The CSS is useful for styling the content of web pages. We can access HTML elements differently and use various CSS properties to style the content.
Sometimes, developers require to style a particular HTML element based on several conditions. For example, we allow users to submit the form on the web application. If the form is successfully submitted, we show the success message in green. Otherwise, we show the error message in red color. In this case, we need to change the style of the message element.
So, we can achieve it using the if-else statement, but unfortunately, CSS doesn’t support the if/else statement. So, we can have alternative solutions for that, and we have explained them below.
Use Different Class Names
The first solution is to use the different classes to style the component. We can add different styles in the different class names and add and remove the class from the element using JavaScript based on certain conditions.
Syntax
Users can use the syntax below to use multiple classes as an alternative approach to using the if/else statement in CSS.
element.classList.remove("success");
element.classList.add("error");
In the above syntax, ‘element’ is an HTML element for that, we need to change the style. After that, we used the classList property to access all classes of elements in the array. The remove() method removes the class, and add() method adds the class.
Example 1
In the example below, we created the form containing the number input. Also, it contains the error and success buttons. We defined the ‘error’ and ‘success’ classes in CSS and added different styles.
In JavaScript, when users click the error button, we show the error message and add the error class to the output element. When users click the success button, we show the success message and add the success class to the output element.
In the output, users can fill out the form and click the button, and it will show the style of the output text based on the button you pressed.
<html>
<head>
<style>
.error {border: 2px solid red; width: fit-content;}
.success {border: 2px solid green; width: fit-content;}
</style>
</head>
<body>
<h3> Using the <i> Multiple classes </i> as an alternative approach of if/else statement in CSS </h3>
<!-- creating the form -->
<form id = "test_form">
<label for = "test_input"> Enter the number: </label>
<input type = "number" id = "test_input" name = "test_input" placeholder = "Enter the number" required>
<br> <br>
<input type = "button" id = "error" value = "error">
<br> <br>
<input type = "button" id = "success" value = "success">
</form> <br>
<div id="output"> </div>
<script>
let output = document.getElementById("output");
let error = document.getElementById("error");
let success = document.getElementById("success");
error.addEventListener("click", function () {
output.innerHTML = "There is an error in the form submission.";
output.classList.remove("success");
output.classList.add("error");
});
success.addEventListener("click", function () {
output.innerHTML = "The form is submitted successfully.";
output.classList.remove("error");
output.classList.add("success");
});
</script>
</body>
</html>
Example 2
In the example below, we created multiple radio buttons containing different values. In JavaScript, we added the click event on each radio button. Whenever the user clicks on any radio button, it will access the value of the radio button and change the color of the output div element according to that.
<html>
<head>
<style>
#output {font-size: 20px; color: yellow; }
</style>
</head>
<body>
<h3> Using the <i> Multiple classes </i> as an alternative approach of if/else statement in CSS </h3>
<!-- Creating multiple radio inputs of color -->
<input type = "radio" name = "color" id = "red" value = "red"> <label for = "red"> Red </label>
<input type = "radio" name = "color" id = "green" value = "green"> <label for = "green"> Green </label>
<input type = "radio" name = "color" id = "blue" value = "blue"> <label for = "blue"> Blue </label>
<input type = "radio" name = "color" id = "yellow" value = "yellow" checked> <label for = "yellow"> Yellow </label>
<input type = "radio" name = "color" id = "orange" value = "orange"> <label for = "orange"> Orange </label>
<br> <br>
<div id = "output"> Yellow color is selected by default. </div>
<script>
let output = document.getElementById("output");
// adding a click event listener to all radio inputs
document.querySelectorAll("input[type=radio]").forEach(function (input) {
input.addEventListener("click", function () {
output.innerHTML = "You have selected " + this.value + " color.";
output.style.color = this.value;
});
});
</script>
</body>
</html>
Use Pre-processors like SASS
Another approach to using the if/else statement in CSS is using the pre-processors like SASS. It allows us to write the conditional statement for CSS as it is built on top of the CSS.
Syntax
Users can follow the syntax below to use the if/else statement in SASS.
.element {
@if $bool == true {
color: $color;
} @else {
color: blue;
}
}
In the above syntax, we set the element's color value based on the bool variable's value.
Example 1
The example below defines the ‘color’ variable containing the ‘red’ value. In the ‘element’ class, we used the if/else statement to assign value to the CSS color property based on the value of the ‘color’ variable.
In the output, we can observe that the color property contains the ‘red’ according to the ‘color’ variable’s value.
$color: red;
.element {
@if $color == red {
color: $color;
} @else {
color: blue;
}
}
Output
.element {
color: red;
}
Example 2
In the example below, we defined the ‘width’ variable. After that, we assign value to the ‘font-size’ property based on the value of the width variable.
In the output, we can check that the font-size property contains only a single value based on the condition of if/else statement.
$width: 200px;
.element {
@if $width > 300px {
font-size: 24px;
} @else if $width > 200px {
font-size: 18px;
} @else {
font-size: 14px;
}
}
Output
.element {
font-size: 14px;
}
Users learned to use the alternative solutions for the if/else condition in CSS. In the first approach, we change the class of the element using JavaScript based on certain conditions. In the second approach, we use the SASS pre-processor to use the if/else statement.
2K+ Views
