In CSS, traditional if/else conditions aren't directly available. Instead, conditional styling is managed through techniques like media queries, which apply styles based on screen size, and feature queries (@supports), which check for browser support of specific CSS features, allowing adaptable and responsive design.
Method 1: Using Classes for Conditional Styling
This method involves using classes in the HTML file to apply conditional styling. You define different class names according to the conditions you want to implement in CSS.
- Suppose we want to change the color of text according to the line number then the if-else condition will be:
if(line1){
color : red;
}else{
color : green;
}- By using the above-discussed method, we will create classes and then apply CSS in it:
.color-line1{
color : red;
}
.color-line2{
color : green;
}So, the above classes will execute only for HTML tags in which these classes are used.
Example: In this example we applies conditional styling using CSS classes. The first line is styled in red with .color-line1, and the second line in green with .color-line2. It showcases basic CSS styling.
html
<!DOCTYPE html>
<html>
<head>
<title>
If-else condition in CSS
</title>
<!-- Applying CSS -->
<style>
/* First line CSS */
.color-line1 {
color: red;
}
/* Second line CSS */
.color-line2 {
color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
If-else condition in CSS
</h3>
<span class="color-line1">This is first line</span>
<br><br>
<span class="color-line2">This is second line</span>
</body>
</html>
Output:
Method 2: Using SASS for Conditional Logic
CSS preprocessors like SASS allow you to write conditional statements within your stylesheets. Although SASS conditions (e.g., @if, @else) are processed at compile time, not at runtime, they offer more flexibility and control in styling.
Syntax:
$type: line;
p {
@if $type == line1 {
color: blue;
} @else if $type == line2 {
color: red;
} @else if $type == line3 {
color: green;
} @else {
color: black;
}
}Explanation: In this example, the $type variable is checked against different conditions, and the appropriate styles are applied based on the matched condition. This approach allows for more dynamic and maintainable styling rules.
To know more about SASS click here
To read about if-else in SASS click here
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Similar Reads
CSS Conditional Rules CSS Conditional Rules apply CSS styles only when certain conditions are met. So the condition here can be either true or false and based on the statements/style will get executed. These rules start with the @ symbol and are part of CSS at-rules.The main conditional rules include:@supports@media@docu
3 min read
How to load css resources conditionally ? In the world of web development, CSS plays a crucial role in styling HTML code. Typically, the CSS code is linked in the head tag of an HTML document, allowing developers to easily apply styles to the content of a web page. However, there may be times when the desired styling is dependent on specifi
6 min read
v-else-if Directive in Vue.js v-else-if directive is a Vue.js directive used to toggle the display CSS property of an element depending on a condition when the if condition is not satisfied. First, we will create a div element with id as app and let's apply the v-else-if directive to an element with data. Now we will create this
2 min read
SASS @if and @else SASS provides flow control mechanisms similar to JavaScript, allowing you to conditionally compile CSS code based on logical expressions. Using @if, @else, and @else if, you can create dynamic styles that change based on the values passed to your mixins or variables.@if DirectiveThe @if directive wo
3 min read
How to add a style on a condition in Tailwind CSS ? In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the
3 min read