CSS selector là một trong những khái niệm quan trọng nhất trong CSS. Đây là một công cụ không thể thiếu để đơn giản hóa quá trình tùy chỉnh trang web, giúp chúng ta dễ dàng kiểm soát hay sửa đổi trang web của mình nhanh chóng khi cần thiết. Vậy CSS selector là gì và chúng có những loại nào? Hãy cùng Pho Tue Software Solutions đi tìm câu trả lời trong bài viết dưới đây!

Pho Tue Software Solutions

CSS selector là gì?

CSS selector là một thành phần của bộ quy tắc CSS, được sử dụng để xác định các phần tử bạn muốn tạo style bằng CSS. CSS selector cho trình duyệt biết các phần tử HTML nào để áp dụng các giá trị thuộc tính CSS. Nó lựa chọn các phần tử HTML dựa trên id, class, loại, thuộc tính của chúng, v.v.

Có nhiều loại CSS selector khác nhau, mỗi loại có cú pháp riêng. Các CSS selector cho phép bạn tùy chỉnh trang web của mình nhanh hơn và duy trì quyền kiểm soát chi tiết mã code của bạn khi xây dựng một trang web từ đầu.

CSS selector được sử dụng để xác định các phần tử bạn muốn tạo style bằng CSS

Tại sao phải sử dụng Selectors?

Nếu không có selector, ta sẽ phải viết style riêng cho từng thành phần. Khi đó, độ dài của file CSS sẽ tỉ lệ thuận với độ dài của file HTML. Điều này không những khiến cho tốc độ tải trang bị ảnh hưởng, mà còn làm cho code rất rối rắm, khó kiểm soát và chỉnh sửa khi cần.

Vì vậy, việc sử dụng selector là vô cùng cần thiết. Sử dụng Selector linh hoạt sẽ giúp file CSS ngắn gọn và tinh giản hơn, giúp tăng tốc độ tải trang web, và giúp chúng ta dễ dàng kiểm soát hay sửa đổi khi cần thiết.

Sử dụng Selector linh hoạt sẽ giúp file CSS ngắn gọn và tinh giản hơn

Những CSS selectors phổ biến

Element selector

Element selector (hay type selector) giúp lựa chọn và định dạng tất cả các element cùng loại trên trang. Xét ví dụ:

HTML:

Đoạn mã trên sử dụng element selector (p). Nó khiến cho text ở tất cả các thẻ Paragraph đều có màu đỏ.

ID selector

ID selector giúp lựa chọn và định dạng cho duy nhất một nguyên tố HTML có chứa ID nhất định. ID selector sử dụng cấu trúc với dấu (#) đứng trước ID cần định dạng

Vẫn là đoạn HTML ban đầu:

Trong trường hợp này, chỉ có một thẻ duy nhất được chỉ định màu đỏ là thẻ <p id="para3">.

Class selector

Class selector lựa chọn và định dạng tất cả các thẻ HTML có chứa class được chỉ định. Class selector sử dụng cấu trúc với dấu (.) đứng trước class cần định dạng.

Vẫn với đoạn HTML ban đầu:

Trường hợp này sử dụng class selector (.center), khiến cho thẻ <p> Đoạn hai và Đoạn bốn được căn giữa trang.

Universal selector

Universal selector (*) giúp bạn định dạng tất cả các thẻ HTML trên một trang.

Ví dụ:

HTML:

Đoạn mã trên khiến tất cả các thẻ HTML có màu blue và được căn giữa, bao gồm cả thẻ Heading lẫn Paragraph.

CSS grouping selector

Việc nhóm các Selector có chung style lại với nhau giúp code của bạn đơn giản hơn.

Xét ví dụ:

Do h1, h2, và p được định dạng giống nhau, bạn có thể sử dụng Selector nhóm như sau:

Lời kết

Trên đây là những kiến thức cơ bản nhất về CSS selectors. Việc nắm bắt cách sử dụng các selectors thành thạo sẽ giúp nâng cao khả năng thiết kế website của bạn, giúp file CSS tối giản, nhẹ nhàng, tăng tốc độ tải trang và cho phép bạn dễ dàng quản lý, chỉnh sửa CSS trong tương lai.