Regex trong CSS - Tại sao không


Regex trong CSS là gì

Regex là các mẫu xử lí thay vì các chuỗi cụ thể được sử dụng để kiểm tra, tìm kiếm hoặc thay thế. Là một công cụ mạnh nhất cho quá trình xử lí ở đa dạng các loại ngôn ngử nghư Php, javascript…

Ví dụ: Kiểm tra tính hợp lệ của một email xem đúng cú pháp không, kiểm tra tính bảo mật của một mật khẩu mới tạo có cao không, kiểm tra tin nhắn có tồn tại những từ khóa cấm sử dụng không.

Regex trong CSS là mẫu xử lí các chuổi tên của các element được khai báo ở HTML như class hay id, nhằm giúp cho việc truy vấn và tìm kiếm các element ở CSS trở nên dể dàng và thuận tiện hơn.

Cú pháp của Regex trong CSS

Củng giống như Regex nói chung tuy nhiên ở CSS regex chỉ làm việc ở các mức độ cơ bản như tìm phần tử nào đó ở vị trí đầu, vị trí cuối và vị trí bất kì.

Cú pháp

    [type(^/*/$) = ' value ']
  • Type là loại element muốn kiểm tra, ví dụ: id, class.
  • ^ là kí hiệu ám chỉ nó là kí tự bắt đầu.
  • * là kí hiệu ám chỉ nó là kí tự ở vị trí bất kì.
  • $ là kí tự ám chỉ nó phải là kí tự cuối cùng trong chuổi.

Ví dụ ở HTML mình sẽ tạo ra các div như sau


Sử dụng regex trong CSS tìm phần tử ở vị trí đầu

    div[id^='im-']{
        border:1px solid blue;
        color:blue;
    }

Regex trong CSS - Tại sao không




Đoạn code trên được giải thích như sau: tìm ở một thẻ div bất kì nếu thẻ div đó có kí tự bắt đầu là "im-" thì sẽ tạo ra một đường viền màu xanh và màu chử màu xanh.

Sử dụng regex trong CSS tìm kí tự ở vị trí bât kì

    div[id*='item']{
        border:1px solid blue;
        color:blue;
      }

Regex trong CSS - Tại sao không

Đoạn code trên được giải thích như sau: Tìm ở tất cả các div, div nào có id mà trong id đó ở vị trí bất kì xuất hiện chử item thì sẽ tiến hành tạo cho nó một đường viền và một chử màu xanh. Ở đây cả ba div trên trong id đều có chử item.

Sử dụng regex trong CSS tìm kí tự ở vị trí cuối

    div[id$='2']{
        border:1px solid blue;
        color:blue;
      }

Regex trong CSS - Tại sao không


Đoạn code trên khi kết hợp với dấu đô đa lẽ tạo ra một câu điều kiện như sau, tìm ở các div, trong div nào có id được kết thúc bằng số 2 thì hảy design lại cho nó. Và ở đây item thứ hai thỏa điều kiện này.

Sử dụng regex trong CSS kết hợp với nhau

    div[id^='im-'][id$='item1']{
        border:1px solid blue;
       color:blue;
     }

Khi chúng ta kết hợp nhiều regex lại với nhau sẽ tạo ra một câu điều kiện khó hơn, cụ thể ở trường hợp này câu điều kiện được hiểu như sau: tìm ở tất cả các element element nào có kí tự bắt đầu là "im-" và kết thúc bằng chử "item1" thì mới đổi màu chử và màu đường viền cho nó.

Video hướng dẩn cụ thể regex trong CSS




Download code trong video

Kết luận

Vậy là thông qua bài tập này chúng ta có thể biết không chỉ có Javascript, hay PHP mới có thể sử dụng regex mà ngay cả CSS củng có thể sử dụng regex và tạo ra một dạng câu điều kiện vô cùng phức tạp từ đó tạo ra những tình huống dải quyết bài toán một cách bất ngờ. Mong rằng bài viết này sẽ hữu ích cho bạn.


Tags
Previous Post Next Post