Bộ chọn Selector trong CSS

Các bộ chọn CSS

Các bộ chọn CSS (selector) cho phép chúng ta chọn và thao tác với các phần tử HTML mà mình mong muốn.

Bộ chọn được sử dụng để “tìm” (hoặc chọn) phần tử HTML dựa trên id, class, loại thẻ, các thuộc tính, và nhiều thứ khác của phần tử HTML.

Bộ chọn phần tử

Bộ chọn Phần tử (element selector) dựa vào tên của các phần tử (thẻ) HTML.

Chẳng hạn, chúng ta có thể chọn tất cả các phần tử <p> trên một trang như thế này (trong trường hợp này, tất cả các văn bản nằm trong thẻ <p> sẽ được căn giữa và có màu đỏ):

Bộ chọn id

Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chỉ định cụ thể một phần tử HTML nào đó.

Một id nên là duy nhất trong một trang, do đó bộ chọn idđược sử dụng khi muốn áp dụng kiểu cho một phần tử duy nhất nào đó trên trang.

Để chọn một phần tử với một id cụ thể, chỉ cần viết kí hiệu # trước id (giá trị của thuộc tính id) của phần tử đó.

Quy tắc kiểu dưới đây sẽ được áp dụng cho các phần tử HTML với id = “para1”:

Lưu ý: Không được đặt id bắt đầu bằng một chữ số hay ký tự đặc biệt.

Bộ chọn class

Bộ chọn class (class selector) chọn các phần tử có thuộc tính class với một giá trị cụ thể.

Để chọn các phần tử với một class cụ thể, chỉ cần viết thêm dấu chấm (.) trước tên của class:

Trong ví dụ dưới đây, tất cả các phần tử HTML với class=”center” sẽ có văn bản được căn giữa và màu đỏ.

Chúng ta cũng có thể kết hợp giữa các bộ chọn khác nhau để tạo nên một bộ chọn mới. Chẳng hạn là kết hợp giữa bộ chọn phần tử với bộ chọn class.

Trong ví dụ dưới đây, chỉ những phần tử <p> với class=”center” có văn bản được căn giữa và màu đỏ:

Gộp các bộ chọn lại với nhau

Trường hợp chúng ta có nhiều phần tử được định nghĩa kiểu giống nhau, chẳng hạn như:

h1 {
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}
p {
    text-align: center;
    color: red;
}

Chúng ta có thể gộp chúng lại với nhau để giảm bớt mã nguồn và dễ điều chỉnh hơn.

Cách làm ở đây là phân tách các bộ chọn bởi dấu phẩy (,).

Sau khi gộp 3 bộ chọn ở trên thì chúng ta sẽ được một bộ chọn mới nhỏ gọn như sau:

h1, h2, p {
    text-align: center;
    color: red;
}

Kết luận

Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.