Bài 30: Cách sử dụng Combinators trong css

Cách sử dụng Combinators trong css

Combinators là các ký tự được sử dụng trong CSS để kết hợp các bộ chọn (selectors) khác nhau để tạo ra các quy tắc chọn phức tạp hơn. Các combinator chính trong CSS bao gồm:

1. Ký tự cách (Space): kết hợp các phần tử con trong một phần tử cha:

.parent span {
  color: red;
}

Trong ví dụ này, combinator "space" được sử dụng để chọn tất cả các thẻ span nằm trong phần tử có lớp là "parent".

2. Ký tự dấu ">" (Direct child): kết hợp các phần tử con trực tiếp của một phần tử cha:

.parent > span {
  color: red;
}

Trong ví dụ này, combinator ">" được sử dụng để chọn tất cả các thẻ span là con trực tiếp của phần tử có lớp là "parent".

3. Ký tự "+" (Adjacent sibling): kết hợp phần tử kế tiếp của một phần tử:

h1 + p {
  font-size: 16px;
}

Trong ví dụ này, combinator "+" được sử dụng để chọn phần tử p đầu tiên ở ngay sau phần tử h1.

4. Ký tự "~" (General sibling): kết hợp tất cả các phần tử anh em của một phần tử:

h1 ~ p {
  font-size: 16px;
}

Trong ví dụ này, combinator "~" được sử dụng để chọn tất cả các phần tử p ở sau phần tử h1.

5. Ký tự "," (Multiple selectors): kết hợp nhiều bộ chọn vào một quy tắc chọn đơn:

h1, h2, h3 {
  color: blue;
}

Trong ví dụ này, combinator "," được sử dụng để áp dụng quy tắc chọn cho các phần tử h1, h2 và h3.

Với các combinator này, bạn có thể kết hợp các bộ chọn khác nhau để tạo ra các quy tắc chọn phức tạp hơn, giúp bạn tùy chỉnh giao diện trang web của mình một cách linh hoạt hơn.