Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
if/else condition in CSS
CSS doesn't support traditional if/else conditions like programming languages. However, there are several techniques to achieve conditional styling through CSS pseudo-classes, media queries, and combinators that simulate conditional logic.
Syntax
/* Using pseudo-classes for conditional styling */
selector:pseudo-class {
property: value;
}
/* Using media queries for responsive conditions */
@media (condition) {
selector {
property: value;
}
}
Approaches for Using Conditional Styling in CSS
Here are three main approaches to implement conditional styling in CSS
Using :checked pseudo-class Selector
The :checked pseudo-class combined with the general sibling combinator (~) allows conditional styling based on input states. When an input is checked, it can affect the styling of sibling elements.
Example
The following example shows conditional styling using :checked pseudo-class to display different color messages based on radio button selection
<!DOCTYPE html>
<html>
<head>
<style>
#output > div {
font-size: 20px;
display: none;
padding: 10px;
margin: 10px 0;
}
#red:checked ~ #output .red,
#green:checked ~ #output .green,
#blue:checked ~ #output .blue {
display: block;
}
.red {
color: red;
background-color: #ffe6e6;
}
.green {
color: green;
background-color: #e6ffe6;
}
.blue {
color: blue;
background-color: #e6f3ff;
}
</style>
</head>
<body>
<h4>Select a color to see conditional styling</h4>
<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" checked>
<label for="blue">Blue</label>
<div id="output">
<div class="red">You selected red color!</div>
<div class="green">You selected green color!</div>
<div class="blue">Blue is selected by default.</div>
</div>
</body>
</html>
Radio buttons appear with "Blue" selected by default. A blue message "Blue is selected by default." is displayed. Clicking different radio buttons shows corresponding colored messages with matching background colors.
Using media Queries
Media queries enable conditional styling based on device characteristics like screen width, creating responsive designs that adapt to different viewport sizes.
Example
This example demonstrates conditional background colors based on viewport width
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.responsive-box {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: white;
font-weight: bold;
}
@media (min-width: 600px) {
.responsive-box {
background-color: green;
}
}
@media (min-width: 900px) {
.responsive-box {
background-color: red;
}
}
@media (min-width: 1200px) {
.responsive-box {
background-color: navy;
}
}
</style>
</head>
<body>
<p><strong>Resize your browser window to see conditional styling</strong></p>
<div class="responsive-box">
Responsive Box
</div>
</body>
</html>
A centered box that changes color based on screen width: light blue (default), green (600px+), red (900px+), or navy (1200px+). The box contains white text "Responsive Box" and has rounded corners.
Using :hover pseudo-class
The :hover pseudo-class provides conditional styling based on user interaction, applying styles when users hover over elements.
Example
This example shows hover-based conditional styling with different background colors
<!DOCTYPE html>
<html>
<head>
<style>
.hover-box {
padding: 20px;
margin: 10px;
text-align: center;
background-color: lightgray;
border: 2px solid #ddd;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.box1:hover {
background-color: #ff6b6b;
color: white;
}
.box2:hover {
background-color: #4ecdc4;
color: white;
}
.box3:hover {
background-color: #45b7d1;
color: white;
}
</style>
</head>
<body>
<p><strong>Hover over the boxes to see conditional styling</strong></p>
<div class="hover-box box1">Hover for Red</div>
<div class="hover-box box2">Hover for Teal</div>
<div class="hover-box box3">Hover for Blue</div>
</body>
</html>
Three gray boxes with text appear. When hovering over each box, they smoothly transition to different colors: the first turns red, the second turns teal, and the third turns blue, with white text.
Conclusion
While CSS doesn't support traditional if/else statements, these techniques provide powerful alternatives for conditional styling. Use :checked for form-based conditions, media queries for responsive design, and :hover for interactive effects.
6K+ Views
