CSS Combinators - bạn đã hiểu rõ chưa?

0 0 0

Người đăng: Nguyễn Văn Khải

Theo Viblo Asia

CSS Combinators là một trong những khái niệm nền tảng cơ bản nhưng cực kỳ quan trọng trong việc xây dựng hệ thống CSS hiệu quả, dễ bảo trì và mở rộng. Dù bạn chưa có nhiều kinh nghiệm hay là một Senior Frontend Developer, việc nắm vững cách sử dụng các combinator sẽ giúp bạn viết CSS rõ ràng, chính xác và tối ưu hơn.

CSS Combinators là gì?

CSS combinators là các ký hiệu dùng để mô tả mối quan hệ giữa các selectors trong CSS, cho phép bạn chọn các phần tử dựa trên vị trí và quan hệ của chúng trong cấu trúc DOM. Một selector trong CSS có thể chứa nhiều simple selectors, và combinators đứng giữa các selectors này để chỉ định cách chúng liên kết với nhau.

Có 4 loại combinators chính trong CSS:

  • Descendant combinator (khoảng trắng)
  • Child combinator (>)
  • Adjacent sibling combinator (+)
  • General sibling combinator (~)

1. Descendant Combinator ( )

Descendant combinator chọn tất cả các phần tử là con cháu (không giới hạn cấp độ) của phần tử cha được chỉ định. Đây là combinator phổ biến nhất và cũng cần kiểm soát phạm vi chặt chẽ nhất

Cú pháp:

selector1 selector2 { /* style */
}

Ví dụ:

div p { color: red;
} 

Trong ví dụ này, tất cả các thẻ

nằm bên trong thẻ

, dù là con trực tiếp hay con cháu sâu hơn, đều sẽ được áp dụng màu chữ đỏ.

2. Child Combinator (>)

Combinator > dùng để chọn phần tử con trực tiếp của một phần tử cha. Đây là công cụ quan trọng khi bạn muốn style áp dụng một cách chính xác, tránh ảnh hưởng đến các cấp sâu hơn.

Cú pháp:

 selector1 > selector2 { /* style */
} 

Ví dụ:

div > p { background-color: yellow;
}

Chỉ những thẻ <p> là con trực tiếp của <div> mới được tô nền vàng, còn các phần tử <p> nằm sâu hơn trong cây DOM thì không. Đây là cách phổ biến để tránh "đổ style" vào những phần tử không mong muốn khi cấu trúc DOM phức tạp.

3. Adjacent Sibling Combinator (+)

Combinator + chọn phần tử anh em liền kề (immediately following sibling) — nghĩa là phần tử xuất hiện ngay sau phần tử được chỉ định, cùng cấp trong DOM.

selector1 + selector2 { /* style */
}

Ví dụ:

h3 + p { font-weight: bold; color: blue;
}

Chỉ những thẻ <p> đứng ngay sau thẻ <h3> mới được áp dụng style chữ đậm và màu xanh. Đây là combinator cực kỳ hữu ích khi bạn muốn áp dụng style theo ngữ cảnh, chẳng hạn như khoảng cách sau tiêu đề, spacing sau hình ảnh, v.v.

4. General Sibling Combinator (~)

Combinator ~ chọn tất cả phần tử cùng cấp nằm phía sau một phần tử khác. Khác với +, combinator này không yêu cầu phải là phần tử liền kề.

Cú pháp:

selector1 ~ selector2 { /* style */
}

Ví dụ:

h3 ~ p { color: green;
}

Tất cả các thẻ <p> cùng cấp đứng sau một thẻ <h3> sẽ có chữ màu xanh lá, dù có các phần tử khác xen giữa.


Kết hợp nhiều combinators

Bạn có thể kết hợp nhiều combinators để tạo ra các selector phức tạp và chính xác hơn.

Ví dụ:

div > h3 + p { background-color: lightgray;
}

Selector này chọn các thẻ <p> mà:

  • Là phần tử đứng ngay sau <h3>,
  • <h3> là con trực tiếp của <div>.

Tổng kết

image.png

Tại sao Developer cần nắm vững CSS Combinators?

  • Tối ưu hiệu suất CSS: Chọn đúng phần tử giúp trình duyệt xử lý CSS nhanh hơn, tránh việc áp dụng style không cần thiết.
  • Tăng tính maintainable: CSS rõ ràng, logic, dễ đọc và dễ chỉnh sửa.
  • Kiểm soát layout phức tạp: Khi làm việc với giao diện phức tạp, combinators giúp bạn target chính xác các phần tử cần style mà không cần thêm class hoặc id thừa thãi.

Nắm vững và vận dụng linh hoạt CSS combinators là kỹ năng không thể thiếu đối với Developer, giúp bạn tạo ra các stylesheet hiệu quả, chuyên nghiệp và dễ dàng mở rộng trong các dự án thực tế.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 97

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 84

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 78

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 93

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 76

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 56