CSS Selector Là Gì? Các Loại Selectors Phổ Biến - Bizfly Cloud

• Techblog
• Kiến thức cơ bản

CSS Selector là gì? Một số loại selectors phổ biến hiện nay Bizfly Cloud85719-05-2020

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 Bizfly Cloud đi tìm câu trả lời trong bài viết dưới đây!

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.

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:

<h1>Heading</h1> <p>Đoạn một</p> <p class="center">Đoạn hai</p> <p "para3">Đoạn ba</p> <p class="center">Đoạn bốn</p> CSS: p { color: red; }

Đ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:

<h1>Heading</h1> <p>Đoạn một</p> <p class="center">Đoạn hai</p> <p id="para3">Đoạn ba</p> <p class="center">Đoạn bốn</p> CSS: #para3 { color: red; }

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:

<h1>Heading</h1> <p>Đoạn một</p> <p class="center">Đoạn hai</p> <p id="para3">Đoạn ba</p> <p class="center">Đoạn bốn</p> CSS: .center { text-align: center; }

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:

<h1>Heading</h1> <p>Đoạn một</p> <p class="center">Đoạn hai</p> <p id="para3">Đoạn ba</p> <p class="center">Đoạn bốn</p> CSS: * { text-align: center; color: blue; }

Đ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ụ:

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

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

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

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.

Link tham khảo:

https://www.w3schools.com/css/css_selectors.asp

https://www.lifewire.com/what-is-a-css-selector-3467058

Bizfly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp.

Bizfly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử.

Độc giả quan tâm đến các giải pháp của Bizfly Cloud có thể truy cập tại đây.

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud

TAGS: CSSSHAREFacebookTwitter