Tidadigi Logo

if/else condition in CSS

Trong CSS, điều kiện if/else truyền thống không có sẵn trực tiếp. Thay vào đó, tạo kiểu có điều kiện được quản lý bằng media queries. Media queries áp dụng kiểu dựa trên kích thước màn hình và feature queries (@supports). Feature queries kiểm tra hỗ trợ của trình duyệt đối với các tính năng CSS cụ thể. Điều này cho phép thiết kế thích ứng và đáp ứng.

Phương pháp 1: Sử dụng Class cho Tạo kiểu Có điều kiện

Phương pháp này liên quan đến việc sử dụng các class trong file HTML để áp dụng kiểu có điều kiện. Bạn định nghĩa các tên class khác nhau tùy theo điều kiện bạn muốn triển khai trong CSS.

  • Giả sử chúng ta muốn thay đổi màu của văn bản theo số dòng, điều kiện if-else sẽ là:
if(line1){
   color : red;
}else{
   color : green;
}
  • Bằng cách sử dụng phương pháp đã thảo luận ở trên, chúng ta sẽ tạo các class và sau đó áp dụng CSS cho nó:
.color-line1{
   color : red;
}
.color-line2{
   color : green;
}

Vì vậy, các class trên sẽ chỉ thực thi cho các thẻ HTML mà các class này được sử dụng.

Ví dụ: Trong ví dụ này, chúng ta áp dụng tạo kiểu có điều kiện bằng các class CSS. Dòng đầu tiên được tạo kiểu màu đỏ với .color-line1, dòng thứ hai màu xanh lá cây với .color-line2. Nó thể hiện kiểu CSS cơ bản.

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>

Đầu ra:

if-else-condition-in-css

Phương pháp 2: Sử dụng SASS cho Logic Có điều kiện

Các CSS preprocessor như SASS cho phép bạn viết các câu lệnh có điều kiện trong stylesheet của mình. Mặc dù các điều kiện SASS (ví dụ: @if, @else) được xử lý tại thời điểm biên dịch. Không phải lúc runtime, chúng cung cấp sự linh hoạt và kiểm soát tốt hơn trong việc tạo kiểu.

Cú pháp:

$type: line;
p {
  @if $type == line1 {
    color: blue;
  } @else if $type == line2 {
    color: red;
  } @else if $type == line3 {
    color: green;
  } @else {
    color: black;
  }
}

Giải thích: Trong ví dụ này, biến $type được kiểm tra dựa trên các điều kiện khác nhau. Các kiểu phù hợp sẽ được áp dụng dựa trên điều kiện được so khớp. Cách tiếp cận này cho phép các quy tắc tạo kiểu động và dễ bảo trì hơn.

Để tìm hiểu thêm về SASS bấm vào đây
Để đọc về if-else trong SASS bấm vào đây
Trình duyệt được hỗ trợ:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

CSS là nền tảng của các trang web. Nó được sử dụng để phát triển trang web bằng cách tạo kiểu cho các trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách theo dõi Hướng dẫn CSS này và Ví dụ CSS này.


Last Updated : 21/07/2025