Nội dung chính
CSS selector là một thành phần chính yếu trong việc tạo phong cách cho trang web. CSS selector hoạt động trên các phần tử HTML, cho phép bạn tạo kiểu dựa trên ID, class, type, thuộc tính,… Trong bài viết này, ITviec sẽ cung cấp cho bạn những thông tin về 10 CSS selector phổ biến nhất hiện nay.
Đọc bài viết để hiểu rõ hơn:
- Cách sử dụng selector trong CSS
- Vai trò của CSS selector trong trang web
- 10 loại CSS selector phổ biến hiện nay
- Selector list là gì?
- Giải đáp thắc mắc về CSS selector
CSS selector là gì? Sử dụng selector trong CSS như thế nào?
CSS selector (hay bộ chọn CSS) là thành phần đầu tiên của quy tắc CSS, xác định các phần tử HTML cụ thể có trên trang và áp dụng các thuộc tính CSS lên chúng, đồng thời kiểm soát cách mà phần tử HTML hiển thị và hoạt động.
Hãy xem ví dụ dưới đây: Selector nằm ở đầu cú pháp, tiếp theo là phần khai báo (declaration) bao gồm thuộc tính (property) và value (giá trị).
Có nhiều loại CSS selector, mỗi loại sẽ có phạm vi áp dụng và những tính năng khác nhau. CSS selector có thể được sử dụng trong CSS nội bộ (internal CSS) và CSS bên ngoài (external CSS).
- Đối với CSS nội bộ, selector thường được đặt trong thẻ <style> ngay trên file HTML.
- Đối với CSS bên ngoài, selector thường được đặt trong một file CSS riêng biệt (.css)
Phần lớn các lập trình viên đều chuộng cách số 2 hơn khi sử dụng CSS selector. Bởi lẽ, việc phân tách mã HTML và CSS giúp các hàm trở nên rõ ràng hơn, dễ quản lý và dễ sử dụng hơn.
Tham khảo các bài viết cùng thuộc chủ đề HTML – CSS:
Vai trò của CSS selector trong việc tạo kiểu trang web
CSS selector cho phép bạn chỉ định chính xác các phần tử HTML để áp dụng các quy tắc CSS, nhờ vậy giúp cải thiện khả năng phản hồi, tính tương tác và sự hấp dẫn trực quan của trang web. Việc nắm vững kiến thức và áp dụng các CSS selector giúp:
- Duy trì tính nhất quán trong thiết kế và bố cục
CSS selector giúp dễ dàng áp dụng các kiểu CSS giống nhau cho nhiều phần tử một cách đồng thời. Thay vì phải viết code CSS lặp đi lặp lại cho từng phần tử, bạn có thể sử dụng CSS selector để định nghĩa một lần và áp dụng cho tất cả các phần tử cần thiết. Điều này giúp tiết kiệm thời gian, giảm thiểu lỗi và đảm bảo thiết kế giao diện web được đồng nhất.
- Tạo kiểu hiệu quả cho các trang web
Các loại CSS selector khác nhau cho phép bạn định dạng CSS chính xác đến các phần tử khác nhau trên trang web. Nhờ vậy, bạn có thể định dạng từng phần tử một cách chi tiết, nhanh chóng và dễ dàng kiểm soát hoàn toàn giao diện và bố cục của trang web.
- Tạo các thiết kế đáp ứng
Với sự phát triển của các thiết bị di động, việc tối ưu hóa trang web cho nhiều kích thước màn hình là điều cần thiết. CSS selector cung cấp các tính năng như media queries, giúp bạn điều chỉnh giao diện trang web phù hợp với từng thiết bị khác nhau, đảm bảo trải nghiệm người dùng tốt nhất trên mọi nền tảng.
- Làm cho các trang web dễ truy cập hơn
Bằng cách sử dụng các selector hợp lý, bạn có thể tạo ra trang web mà người dùng có thể dễ dàng truy cập và sử dụng, bao gồm cả người dùng khiếm khuyết.
- Tăng tính linh hoạt và khả năng tái sử dụng
CSS selector giúp bạn dễ dàng quản lý định dạng của các phần tử. Thay vì phải định dạng CSS cho từng phần tử, bạn có thể sử dụng CSS selector để áp dụng CSS cho nhiều phần tử, giúp tiết kiệm thời gian, giảm thiểu rủi ro lỗi. Việc sử dụng CSS selector hiệu quả giúp code CSS trở nên linh hoạt, dễ dàng điều chỉnh và tái sử dụng cho các dự án khác nhau.
- Giảm số lượng code
Áp dụng CSS selector đồng thời cho nhiều phần tử có thể giảm bớt số lượng code CSS khi không cần phải định dạng cho từng phần tử. Điều này giúp code CSS trở nên ngắn gọn, dễ đọc và dễ quản lý hơn. Giảm thiểu code CSS cũng góp phần tăng tốc độ tải trang web và cải thiện hiệu suất.
Các loại CSS selector
Class selector (Bộ chọn theo lớp)
Trong CSS, selector theo lớp (class selector) chọn tất cả các thành phần (element) có cùng một tên lớp (class name) nhất định. Ví dụ, “.intro” sẽ chọn bất kỳ thành phần nào có class là “intro”, tương tự “.index” sẽ chọn bất kỳ thành phần nào có class là “index”.
Đây là một trong những selector được sử dụng phổ biến nhất, nếu bạn đang sử dụng Bootstrap CSS, một framework CSS mã nguồn mở phổ biến, thì bạn sẽ thấy hầu hết các kiểu (style) của nó đều sử dụng các lớp làm selector.
Bạn có thể tìm thấy danh sách đầy đủ các lớp Bootstrap trên trang web https://getbootstrap.com/.
Cú pháp của class selector:
.classname { style: properties; }
Ví dụ:
Class seclector chọn các thành phần có classname là “pastoral” và đổi thành màu xanh:
HTML
<h1>Not blue</h1> <h1 class="pastoral">Blue</h1>
CSS
.pastoral { color: blue; }
Ảnh kết quả:
Lưu ý: Để class selector class hoạt động chính xác, tên class trong HTML phải giống hoàn toàn với tên class được sử dụng trong CSS selector. Nói cách khác, tên class phải viết hoa, viết thường và dấu cách (nếu có) phải khớp nhau.
ID selector (Bộ chọn theo ID)
Trong CSS, ID selector dùng để chọn một thành phần (element) dựa trên thuộc tính ID của nó. Ví dụ, #toc sẽ chọn thành phần nào có ID là “toc”. Lưu ý rằng selector này chỉ hoạt động khi giá trị được cung cấp trong selector khớp với thuộc tính ID của thành phần.
Tuy nhiên, người ta thường hạn chế việc có nhiều hơn 1 phần tử HTML có cùng ID (vì sẽ dễ gây ra các vấn đề về xung đột phần tử, JavaScript). Do đó, ID selector có phần kém linh hoạt hơn class selector.
Cú pháp của ID selector:
#idname { style: properties; }
Ví dụ:
ID seclector chọn các thành phần có tên ID là “itviec”, đổi màu thành màu cam và căn phải:
HTML
<h1 id="itviec"> #id selector</h1>
CSS
#itviec { color: orange; text-align: right; }
Ảnh kết quả:
Lưu ý: Nếu thuộc tính ID của phần tử được viết hoàn toàn bằng chữ thường thì bạn cần viết đúng như vậy. Nếu viết hoa chữ “H” trong CSS selector thì phần tử đó sẽ không được chọn.
Type selector (Bộ chọn theo loại)
Type selector cho phép áp dụng kiểu dáng đồng nhất cho các thành phần HTML trên trang web. Bằng cách đó, website sẽ có giao diện thống nhất cho các tiêu đề, đoạn văn và mục danh sách, từ đó giúp giao diện web trong đồng nhất và đẹp mắt hơn.
Type selector là chỉ định loại phần tử HTML cần áp dụng CSS mà không cần thêm class hay id (ví dụ: p, div, button,…). Nó giúp quá trình áp dụng CSS cho các phần tử trở nên thuận tiện và nhanh chóng. Tuy nhiên, việc lạm dụng type selector sẽ gây ra các vấn đề xung đột CSS giữa các file khác nhau hoặc nhầm lẫn việc định dạng cho các phần tử không được yêu cầu.
Cú pháp của Type selector:
element { style: properties; }
Ví dụ sử dụng Type selector:
HTML
<span>One span. </span> <p>No span. </p> <span>Two span.</span> <p>No span. </p>
CSS
span { background-color: red; }
Ảnh kết quả:
Attribute selector (Bộ chọn theo thuộc tính)
Trong CSS, Attribute selector cho phép chọn các thành phần (element) dựa trên một thuộc tính nhất định hoặc thuộc tính đó được thiết lập thành một giá trị cụ thể.
Ví dụ:
- a[href]: chọn tất cả các liên kết (bởi vì tất cả liên kết đều có thuộc tính href).
- a[href*=”itviec”]: chỉ chọn các liên kết có “itviec” trong URL của chúng (sử dụng toán tử * để kiểm tra sự xuất hiện của chuỗi con).
Selector theo thuộc tính còn có thể áp dụng các quy tắc CSS cho các thành phần dựa trên giá trị cụ thể của một thuộc tính. Ví dụ, để định kiểu cho bất kỳ liên kết nào có chính xác chuỗi “itviec” trong URL, bạn có thể sử dụng a[href=”itviec”].
Ngoài ra, bạn có thể sử dụng một namespace được định nghĩa để giới hạn selector thuộc tính cho các thành phần chỉ nằm trong không gian tên đó.
Cú pháp chung của Attribute selector:
[attr] { style: properties; }
Các kiểu chọn thuộc tính cụ thể:
[attr=value] { style: properties; }
Chọn các phần tử có thuộc tính attr có giá trị chính xác bằng value. Ví dụ: [href=”#top”] { color: red; } sẽ chọn tất cả các liên kết (<a>) có thuộc tính href có giá trị chính xác là “#top”.
[attr~=value] { style: properties; }
Chọn các phần tử có thuộc tính attr có giá trị chứa value, cách nhau bởi một khoảng trắng (space). Ví dụ: [class~=”important”] { font-weight: bold; } sẽ chọn tất cả các phần tử có class chứa “important” như “important” hoặc “warning important”.
[attr|=value] { style: properties; }
Chọn các phần tử mà thuộc tính attr có giá trị chính xác là value (không có ký tự nào theo sau) hoặc bắt đầu bằng value tiếp theo là một dấu gạch ngang. Ví dụ: [lang|=“en”] chọn phần tử có lang=”en” hoặc lang=”en-US”, nhưng không phải lang=“enUS”.
[attr^=value] { style: properties; }
Chọn các phần tử mà thuộc tính attr bắt đầu bằng value và có thể theo sau bởi bất kỳ ký tự nào (kể cả khoảng trắng). Ví dụ: [id^=”section-“] { border: 1px solid #ccc; } sẽ chọn tất cả các phần tử có ID bắt đầu bằng “section-” như “section-1” hoặc “section-about”.
[attr$=value] { style: properties; }
Chọn các phần tử có thuộc tính attr kết thúc bằng value (không có ký tự nào trước đó). Ví dụ: [href$=”.jpg”] { width: 100%; } sẽ chọn tất cả các liên kết có thuộc tính href kết thúc bằng “.jpg”.
[attr*=value] { style: properties; }
Chọn các phần tử có thuộc tính attr có giá trị chứa value (không phân biệt khoảng trắng). Ví dụ: [data-color*=”red”] { background-color: pink; } sẽ chọn tất cả các phần tử có thuộc tính data-color chứa “red” như “red” hoặc “light-red”.
Ví dụ: Tìm các url có chứa chuỗi con “hubspot”
HTML
<ul> <li><a href="http://blog.com">blog.com</a></li> <li><a href="http://hubspot.com">hubspot.com</a></li> <li><a href="http://google.com">google.com</a></li> <li><a href="http://blog.hubspot.com">blog.hubspot.com</a></li> </ul>
CSS
a[href*=”hubspot”] {
color: orange;
}
Ảnh kết quả:
Pseudo-classes selector (Lớp giả)
Pseudo-class selector là một loại bộ chọn nâng cao trong CSS, được sử dụng để chọn các phần tử dựa trên trạng thái hoặc hành vi của chúng, thay vì dựa trên thẻ HTML hoặc thuộc tính.
Cú pháp của Pseudo-class selector:
selector:pseudo-class { style: properties; }
Pseudo-class trong CSS không trực tiếp áp dụng cho ID, Class hay Type element. Thay vào đó, nó được sử dụng để tạo kiểu cho các trạng thái hoặc hành vi của các phần tử đã được chọn bởi các loại selector khác như ID, Class, Type element hoặc kết hợp giữa chúng. Có rất nhiều loại Pseudo-class selector khác nhau được sử dụng cho nhiều mục đích khác nhau:
- :hover: Khi rê chuột lên phần tử
- :focus: Khi phần tử được chọn (bằng bàn phím)
- :active: Khi phần tử được nhấn (bằng chuột hoặc bàn phím)
- :first-child: Đối với phần tử đầu tiên trong một nhóm con
- :last-child: Đối với phần tử cuối cùng trong một nhóm con
- :nth-child(n): Đối với phần tử thứ n trong một nhóm con
- :even: Đối với các phần tử có vị trí chẵn trong một nhóm con
- :odd: Đối với các phần tử có vị trí lẻ trong một nhóm con
Ví dụ: Đổi màu của các liên kết mà người dùng đã truy cập thành màu xanh lá cây. Giữ các liên kết mà người dùng chưa truy cập thành màu xanh dương. Và các liên kết chuyển sang màu hồng khi người dùng di chuột qua chúng.
HTML
<p>Chào mừng bạn đến với <a href="https://itviec.com/blog">ITviec Blog</a>.
Bạn có thể cập nhật việc làm IT mới nhất tại <a href="http://itviec.com">Trang chủ ITviec</a>?</p>
CSS
a:link { color: #0000FF; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; }
Pseudo-elements selector (Lớp giả phần tử)
Pseudo-elements selector trong CSS cho phép bạn tạo kiểu cho một phần cụ thể của các phần tử đã chọn. Ví dụ: Tạo kiểu cho chữ cái hoặc dòng đầu tiên của một phần tử và chèn nội dung trước hoặc sau nội dung của một phần tử. Bên cạnh đó, việc sử dụng pseudo-elements selector sẽ giúp tinh chỉnh và nâng cao trải nghiệm trực quan của các trang web mà không cần thêm các thẻ HTML không cần thiết.
Cú pháp của Pseudo-element selector:
selector::pseudo-element { property: value; }
Với Pseudo-elements selector CSS, bạn có thể thực hiện nhiều định dạng ngay trên nội dung của mình như CSS ::first-line Pseudo-element (phần tử giả dòng đầu tiên), CSS ::first-letter Pseudo-element (phần tử giả cho chữ cái đầu tiên), CSS ::before Pseudo-element (trước phần tử giả), CSS ::after Pseudo-element (sau phần tử giả),…
Các CSS selector kết hợp
Ký tự trắng (Descendant Combinator)
Ký tự trắng (whitespace hoặc descendant combinator) chọn tất cả các phần tử có nguồn gốc từ một phần tử cụ thể, bất kể chúng được lồng sâu đến mức nào trong cấu trúc HTML.
Ví dụ: Chọn tất cả các phần tử <p> xuất phát từ một phần tử có lớp “parent_element”:
.parent_element p { /* Các kiểu CSS ở đây */ }
Child Combinator
Child Combinator được biểu diễn bằng ký hiệu ( >). Nó chọn các phần tử là con trực tiếp của một thành phần cụ thể.
Ví dụ: Chọn các phần tử <p> xuất phát từ phần tử con của một phần tử có lớp “parent_element”.
.parent_element > p { /* Các kiểu CSS ở đây */ }
Adjacent Sibling Combinator
Được biểu thị bằng ký hiệu (+), Adjacent Sibling Combinator bộ kết hợp anh chị em liền kề sẽ chọn các phần tử ngay sau phần tử được chỉ định.
Ví dụ: Chọn tất cả phần tử <p> ngay sau phần tử <h3>
H3 + p { /* Các kiểu CSS ở đây */ }
Lưu ý: Nó sẽ không áp dụng kiểu dáng cho các phần tử <p> không có <h3> đứng trước.
General Sibling Combinator
General Sibling Combinator sử dụng ký hiệu ( ~ ) để chọn các phần tử là anh em của các phần tử cụ thể và có chung cha mẹ.
Ví dụ: Chọn tất cả các phần tử <p> có cùng phần tử cha mẹ với phần tử <h3>.
H3 ~ p { /* Các kiểu CSS ở đây */ }
Selector list là gì?
Selector list (danh sách selector) là một tập hợp các CSS selector được kết hợp với nhau để áp dụng cùng một quy tắc CSS cho nhiều thành phần HTML khác nhau. Chẳng hạn, bạn muốn định dạng tiêu đề h1 và h2 trên trang web thành màu đỏ.
Thay vì viết hai quy tắc CSS riêng biệt là:
h1 { color: red; } h2 { color: red; }
Bạn có thể sử dụng selector list như sau:
h1, h2 { color: red; }
4 cấu trúc CSS selector thường gặp
Có 4 cấu trúc selector thường gặp trong CSS là simple selector, compound selector, complex selector và relative selector.
Simple selector (bộ chọn đơn)
Simple selector (bộ chọn đơn) là bộ chọn có một thành phần duy nhất, chẳng hạn bộ chọn loại duy nhất (single type selector), bộ chọn thuộc tính (attribute selector) hoặc lớp giả (pseudo-class). Đặc điểm chính của bộ chọn đơn là chúng không được sử dụng kết hợp hoặc chứa bất kỳ thành phần selector nào khác
Ví dụ:
#myId {
}
[pattern*="\d"] {
}
Compound selector (bộ chọn ghép)
Compound selector (bộ chọn ghép) biểu thị một tập hợp các điều kiện đồng thời trên một phần tử. Một phần tử đã cho được cho là khớp với bộ chọn ghép khi phần tử khớp với tất cả các selector đơn trong selector ghép.
Ví dụ:
a#selected {
}
[type="checkbox"]:checked:focus {
}
Complex selector (selector phức hợp)
Complex selector (selector phức hợp) là một chuỗi gồm một hoặc nhiều selector đơn và/hoặc selector ghép được phân tách bằng các toán tử kết hợp (descendant combinator), bao gồm cả ký tự trắng (whitespace).
Ví dụ:
a#selected > .icon {
}
.box h2 + p {
}
Relative selector (selector tương đối)
Relative selector (selector tương đối) là selector xác định một phần tử dựa trên mối quan hệ của nó với một hoặc nhiều phần tử neo (anchor element) đi trước, được nối bằng một toán tử kết hợp.
Ví dụ:
+ div#topic > #reference {
}
> .icon {
}
dt:has(+ img) ~ dd {
}
Các câu hỏi về CSS selector thường gặp
CSS selector có thể ảnh hưởng tiêu cực đến hiệu suất website như thế nào?
CSS selector có thể ảnh hưởng tiêu cực đến hiệu suất website thông qua nhiều yếu tố như:
- Bản chất trang web: Một trang web đơn giản với ít thành phần và tương tác thì ít bị ảnh hưởng bởi các CSS selector phức tạp. Ngược lại, trang web phức tạp với nhiều thành phần và thay đổi nội dung thường xuyên sẽ dễ bị ảnh hưởng hơn.
- Kích thước cây DOM (DOM tree): Cây DOM là một cấu trúc lưu trữ tất cả các thành phần HTML trên trang. Cây DOM lớn sẽ khiến việc tìm kiếm các thành phần mục tiêu bằng CSS selector phức tạp tốn thời gian hơn.
- Số lượng quy tắc CSS: Số lượng quy tắc CSS càng nhiều thì trình duyệt càng mất nhiều thời gian để xử lý và áp dụng cho các thành phần. Do đó, CSS selector phức tạp có thể làm tăng thời gian này.
- Tần suất thay đổi nội dung DOM: Nếu nội dung trang web thay đổi thường xuyên (ví dụ như các ứng dụng web), thì việc sử dụng CSS selector phức tạp có thể ảnh hưởng đến hiệu suất hơn, vì trình duyệt cần tính toán lại các quy tắc để áp dụng cho nội dung mới.
Cách nhanh nhất để chọn các thành phần bằng cách sử dụng CSS selector là gì?
Cách nhanh nhất để chọn các thành phần bằng CSS là sử dụng ID selector. So với các selector khác, ID của một thành phần HTML là duy nhất trong toàn bộ trang web. Nhờ đó, bạn có thể xác định chính xác một thành phần cụ thể mà không cần tìm kiếm nhiều lần.
Hơn nữa, cú pháp ID selector cũng rất đơn giản, chỉ sử dụng ký hiệu thăng (#) nối tiếp với giá trị ID của thành phần đó. Ví dụ: Bạn muốn tìm thành phần với ID “banner”, bạn chỉ cần viết:
#banner { /* Các kiểu CSS dành cho thành phần */ }
Thứ tự selector trong CSS có quan trọng không?
Trong CSS, thứ tự chúng ta chỉ định các quy tắc rất quan trọng. Nếu tồn tại một quy tắc từ cùng một biểu định kiểu, có cùng mức độ cụ thể thì quy tắc được khai báo cuối cùng trong tài liệu CSS sẽ là quy tắc được áp dụng.
Làm cách nào để nhóm nhiều selector trong CSS?
Để nhóm nhiều selector trong CSS, bạn có thể sử dụng selector list như ITviec đã hướng dẫn trước đó. Bạn chỉ cần liệt kê các selector và phân tách chúng bằng dấu phẩy trước dấu ngoặc chứa thuộc tính kiểu.
Tổng kết về CSS selector
CSS selector là các cú pháp được sử dụng để xác định và chọn các phần tử HTML mà cần áp dụng các quy tắc CSS. Các selector này có thể là tên thẻ HTML, class, ID, hoặc các thuộc tính khác của phần tử. Việc sử dụng CSS selector giúp tùy chỉnh giao diện của trang web.
Có nhiều loại CSS selector như class, ID, selector kết hợp, selector pseudo-classes và pseudo-elements,… Mỗi loại selector đều có cú pháp và cách sử dụng riêng biệt, cho phép áp dụng CSS một cách chính xác và linh hoạt theo nhu cầu cụ thể của dự án.
Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.
Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!