Bộ chọn trong css cơ bản cho người mới bắt đầu

Bộ chọn trong css (css selector) là các quy tắc chọn ra các thành phần html để áp dụng các định dạng css. Ví dụ: Chọn ra tất cả thẻ p và sau đó áp dụng màu chữ là đỏ. Sau đây chúng ta sẽ đi vào chi tiết các bộ chọn trong css.

Bộ chọn đơn trong css

• *: Chọn tất cả các thành phần html
• .ten_class => Chọn các thành phần html có thuộc tính class với giá trị là ten_class
• #ten_id: => Chọn các thành phần html có thuộc tính id với giá trị là ten_id
• ten_the: => Chọn tất cả các thẻ có tên là ten_the
• [ten_thuoc_tinh]: => Chọn các thành phần html có khai báo thuộc tính ten_thuoc_tinh
• [ten_thuoc_tinh=gia_tri] => Chọn các thành phần html có khai báo thuộc tính ten_thuoc_tinh với giá trị tương ứng là gia_tri
• [ten_thuoc_tinh~=gia_tri] => Chọn các thành phần html có khai báo thuộc tính ten_thuoc_tinh với giá trị tương ứng có chứa gia_tri
• :ten_lop_gia => Chọn các thành phần html khi được áp dụng một lớp giả ten_lop_gia. Lớp giả trong css là một trạng thái của các thành phần html. Một số lớp giả phổ biến như: 
  • link : Các liên kết (thẻ a) khi đang ở trạng thái bình thường
  • visited: Các liên kết ở trạng thái đã được truy cập trước đó. Có nghĩa là chúng ta đã từng truy cập url http://abc.com, và có một thẻ a với thuộc tính href là http://abc.com thì thẻ a này sẽ có thêm trạng thái visited.
  • active: Các liên kết khi vừa được nhấn chuột vào
  • hover : Các thành phần khi được rê chuột vào
  • focus : Các ô nhập liệu khi được nhận focus. Có nghĩa là khi nó sẵn sàng để nhận tương tác, ví dụ đối với ô nhập text, khi chúng ta gõ phím thì các phím sẽ được thêm vào ô nhập liệu
  • first-child: Các thành phần html ở trạng thái là con trực tiếp đầu tiên của một thành phần html khác.
  • last-child: Các thành phần html ở trạng thái là con trực tiếp cuối cùng của một thành phần html khác.
  • first-of-type: Các thành phần html ở trạng thái là con trực tiếp đầu tiên và cùng loại của một thành phần html khác.
  • last-of-type: Các thành phần html ở trạng thái là con trực tiếp cuối cùng và cùng loại của một thành phần html khác.
  • checked: Các thành phần nhập liệu đang ở trạng thái đã được chọn. Thường áp dụng cho các checkbox input, radio input.
  • disabled: Các ô nhập liệu ở trạng thái disabled (không tương tác được)
  • empty: Các thành phần html ở trạng thái không có phần tử con
  • not(selector): Các thành phần html ở trạng thái phủ định của selector. selector ở đây cũng là một bộ chọn css.
• :ten_phan_tu_gia => Chọn ra một phần nội dung (phần từ giả) từ phần tử gốc. Trong css3, chúng ta nên khai báo chính xác bộ chọn này là ::ten_phan_tu_gia (hai dấu hai chấm thay vì chỉ có một dấu hai chấm, có thể để phân biệt với lớp giả). Chúng ta có các phần tử giả phổ biến như:
  • before: Nội dung ngay phía trước nội dung gốc
  • after: Nội dung ngay phía sau nội dung gốc
  • selection: Vùng nội dung được chọn hay bôi đen
  • first-line: Dòng đầu tiên trong nội dung gốc
  • first-letter: Chữ cái đầu tiên của văn bản

Bộ chọn kết hợp trong css

Là cách kết hợp giữa các bộ chọn đơn với nhau. Các quy tắc kết hợp này chủ yếu dựa trên quan hệ giữa các thẻ html. Chúng ta có các cách kết hợp cơ bản như sau:

• selector1selector2 => Viết liền không có ký tự nào ở giữa 2 bộ chọn => Chọn các thành phần thoã mãn selector2 và đồng thời thoã mãn cả selector1
• selector1 selector2 => Có dấu cách ở giữa 2 bộ chọn => Chọn các thành phần thoã mãn selector2 và đồng thời là con của các thành phần thoã mãn selector1
• selector1>selector2 => Có dấu lớn (>) ở giữa 2 bộ chọn => Chọn các thành phần thoã mãn selector2 và đồng thời là con TRỰC TIẾP của các thành phần thoã mãn selector1
• selector1+selector2 => Có dấu cộng (+) ở giữa 2 bộ chọn => Chọn các thành phần thoã mãn selector2 và đồng thời nằm LIỀN sau các thành phần thoã mãn selector1
• selector1~selector2 => Có dấu ngã (~) ở giữa 2 bộ chọn => Chọn các thành phần thoã mãn selector2 và đồng thời nằm sau các thành phần thoã mãn selector1
• selector1,selector2 => Chọn các thành phần thoã mãn selector1 hoặc selector2

Ví dụ mẫu về bộ chọn trong css

Chúng ta cùng xem xét về đoạn html sau:

<body>
    <h1>Ví dụ về bộ chọn trong css</h1>
    <div class="box">
        <h2>Khối 1</h2>
        <p class="p">Đoạn văn 1</p>
        <p class="p">Đoạn văn 2</p>
        <p class="p">Đoạn văn 3</p>
    </div>
    <div class="box">
        <h2>Khối 2</h2>
        <p class="p">Đoạn văn 4</p>
        <p class="p" id="p5">Đoạn văn 5</p>
        <p class="p">Đoạn văn 6</p>
    </div>
</body>

Bây giờ, chúng ta sẽ làm vài ví dụ css cho đoạn html trên. 

1. Định dạng tất cả thành phần trên trang có màu chữ là đỏ. Css viết như sau: 

*{
    color: red;
}

2. Chỉ có các thẻ p có màu chữ là đỏ. Css viết như sau:

p{
    color: red;
}

3. Tất cả thẻ p và tất cả thẻ h2 đều có màu là đỏ. Css viết như sau:

p, h2{
    color: red;
}

4. Các thẻ p nằm ngay liền sau thẻ h2 có màu là đỏ. Css viết như sau:

h2+p{
    color: red;
}

5. Con trực tiếp đầu tiên trong mỗi class box có màu là đỏ. Css viết như sau:

.box>:first-child{
    color: red;
}

6. Thẻ p đầu tiên trong tập hợp X. Với X là các thẻ p là con trực tiếp của mỗi class box.

.box>p:first-of-type{
    color: red;
}

Các bạn có thể tiếp tục thực hành để nắm vững lý thuyết về bộ chọn trong css.

Như vậy, chúng ta đã đi được một phần hai chặng đường học css. Phần tiếp theo chúng ta sẽ học về các thuộc tính trong css.