Bộ Chọn CSS - CSS Selector

Bộ chọn CSS được sử dụng để chọn ra phần tử HTML trên trang.

CSS cung cấp nhiều loại bộ chọn khác nhau để có thể chọn ra được bất kỳ phần tử HTML nào có trên trang. Trong phạn vi bài học này chúng ta sẽ tìm hiểu các loại bộ chọn được sử dụng phổ biến sau đây:

• Bộ chọn phần tử.
• Bộ chọn ID.
• Bộ chọn lớp.
• Bộ chọn con cháu.

Bộ Chọn Phần Tử - Element Selector

Bộ chọn phần tử trong CSS được sử dụng phổ biến, nó giúp chúng ta chọn ra một tập hợp các phần tử HTML trên trang ứng với tên cho trước.

Bộ chọn phần tử có cú pháp rất đơn giản:

  tên_phần_tử {      /* khai báo CSS */  }

Ở đoạn code dưới đây chúng ta có một bộ chọn phần tử được sử dụng là p để chọn ra tất cả các phần tử p trên trang:

  p {      color: red;  }

Bộ Chọn Phần Tử trong CSS

Bộ Chọn ID - ID Selector

Bộ chọn ID dùng để chọn ra duy nhất một phần tử HTML trên trang với thuộc tính ID khớp với giá trị cho trước.

Cú pháp bộ chọn ID trong CSS:

  #giá_trị_id {      /* khai báo CSS */  }

Ở đoạn code dưới đây chúng ta có một bộ chọn ID để chọn ra duy nhất một phần tử HTML với thuộc tính ID có giá trị là highlight:

  #highlight {      background-color: yellow;  }

Ví Dụ về Bộ Chọn ID trong CSS - CSS ID Selector

Bộ Chọn Lớp - Class Selector

Bộ chọn lớp hay class trong CSS dùng để chọn ra tất cả các phần tử HTML trên trang với thuộc tính class chứa một hoặc nhiều giá trị cho trước.

Cú pháp bộ chọn lớp trong CSS:

  .giá_trị_class {      /* khai báo CSS */  }

Ở đoạn code dưới đây chúng ta có một bộ chọn ID để chọn ra duy nhất một phần tử HTML với thuộc tính class có giá trị là highlight:

  .highlight {      background-color: yellow;  }

Bộ Chọn Lớp trong CSS - CSS Class Selector

Bộ chọn lớp cho phép chúng ta có thể kết hợp nhiều class cùng một lúc, ví dụ như sau:

  .highlight.red {      background-color: yellow;      color: red;  }

Bộ Chọn Lớp CSS Với Nhiều Giá Trị Khác Nhau

Bộ Chọn Con Cháu - Descendant Selector

Bộ chọn con cháu trong CSS được sử dụng để chọn ra tất cả các phần tử trên trang là con hoặc cháu của phần tử cho trước.

Cú pháp của bộ chọn con cháu trong CSS như sau:

  phần_tử_1 phần_tử_2 {      /* khai báo CSS */  }

Trong đó:

• phần_tử_1 là tên của phần tử cha, ông, cụ, kỵ.... (gọi ngắn là phần tử cha ông).
• phần_tử_2 là tên của phần tử con, cháu, chắt, chút, chít... (gọi ngắn là phần tử con cháu).

Ở đoạn code dưới đây chúng ta có một bộ chọn cha con để chọn ra tất cả các phần tử p là con hoặc cháu của phần tử div:

  div p {    color: red;  }

Bộ Chọn Con Cháu - CSS Decendant Selector trong CSS

Bạn cũng có thể sử dụng bất kỳ các loại bộ chọn nào cho phần tử cha ông hoặc con cháu.

Ví dụ dưới đây sử dụng kết hợp giữa bộ chọn class cho phần tử cha ông và bộ chọn phần tử cho phần tử con cháu để hình thành một bộ chọn cha con:

  .red p {    color: red;  }

Bộ Chọn Con Cháu Sử Dụng Kết Hợp Giữa Bộ Chọn Lớp và Bộ Chọn Phần Tử

Chúng ta cũng có thể sử dụng nhiều hơn hai bộ chọn:

  div div p {      color: red;  }

Sử Dụng Kết Hợp Nhiều Hơn Hai Bộ Chọn trong Bộ Chọn Con Cháu

Bộ chọn cha con trong đoạn code CSS chỉ chọn ra các phần tử p là con hoặc cháu của phần tử div và phần tử div này cũng phải là con hoặc cháu của một phần tử div khác