Trong bài viết này, chúng ta sẽ tìm hiểu về một khái niệm không hề mới nhưng không phải ai cũng có thể nắm rõ và sử dụng linh hoạt, CSS Selector.

    CSS Selector là gì, nó được chia ra làm những loại như thế nào ?

CSS Selector là gì

    Một css selector dùng để select một hoặc nhiều element mà chúng ta muốn css

    Đối với những người chưa có kinh nghiệm hay chưa nắm rõ về CSS Selector thường sử dụng tên thẻ, id hoặc class để select các elements. Điều này dẫn đến những đoạn code css rất dài, rối rắm và khó kiểm soát. Sử dụng css selector linh hoạt giúp chúng ta viết css dễ dàng, ngắn ngọn và clean code hơn.

Các loại CSS Selector

    Chúng ta có thể chia CSS Selector thành 5 loại:

• Simple selectors
• Combinator selectors
• Pseudo-class selectors
• Pseudo-elements selectors
• Attribute selectors

    1. Simple Selectors

    Simple Selectors: select các elements dựa trên element name, id, class.

•     selector dựa vào element name:

      p { color: red }

•     selector dựa vào id, class:

#para1, .center {
  text-align: center;

• Bạn cũng có thể select một element cụ thể với một class name:

    p.center { text-align: center; }

• Universal selector: select tất cả element trong page:

* {
  text-align: center;
}

2. Combinator selectors

    Select elements dựa trên mối quan hệ giữa các element

3. Pseudo-class selectors

    Select elements dựa trên một trạng thái của element

    Css cung cấp cho chúng ta rất nhiều pseudo-class selector. Dưới đây mình sẽ chỉ giới thiệu tới mọi người một số pseudo-class selector hay dùng.

    Mọi người có thể tham khảo các pseudo-class selector khác tại đây: https://www.w3schools.com/css/css_pseudo_classes.asp

4.Pseudo-elements selectors

    Selects and style một phần của một element

5.Attribute selectors

    Selects elements dựa trên một attribute name hoặc attribute value