CSS selectors chọn element để apply style. Selector cơ bản nhất: element selector (chọn bằng tên). Selector khác: id, class, universal, descendant.
Selector là 1 trong 2 phần của mọi CSS statement. Dùng target element trên HTML page cho style cụ thể.
Có nhiều CSS selector để target chính xác element trên web page, cho phép customization cao khi design.
Guide khám phá cơ bản selector trong CSS và cách tận dụng các selector phổ biến nhất.
CSS Selectors
CSS selectors xác định HTML element muốn apply CSS style. Selector chọn element dựa trên name, ID, class, attribute khác. Selector xuất hiện trước cặp ngoặc nhọn trong CSS rule.
Trong CSS, rule định nghĩa style apply cho element hoặc range element. Rule có 2 component: selector và declaration.
Ví dụ rule CSS:
h1 { color: pink; }
Rule set color tất cả h1 element = pink. 2 component:
- h1 – element apply style. Gọi là selector.
- color: pink – style apply cho element trong selector. Gọi là declaration. Ví dụ: đổi color all h1 = pink.
CSS selectors là fundamental part của web styling. Selector cho phép báo browser element nào dùng style cụ thể. Ví dụ: selector chỉ định style all <h1> hoặc all <p> element.
Các Loại CSS Selector
CSS cung cấp nhiều selector. Khám phá ví dụ main selector bạn gặp khi design CSS rule.
CSS Element-Based Selector
Element-based selector apply style cho tất cả instance của element trong document tương ứng rule. Ví dụ: apply style cho all <p> tag.
Giả sử muốn đổi color all paragraph text thành xám:
p { color: gray; }
Declarations trong selector "p" apply cho mọi paragraph (<p>) trên web page.
CSS id Selector
CSS id selector chọn HTML element dựa trên ID. HTML ID unique → id selector dùng apply style cho SINGLE element. Cú pháp: dấu hash (#) + element ID.
Giả sử muốn set CSS height của element "box9" = 150px:
#box9 { height: 150px; }
Rule set height element id "box9" = 150px.
CSS Class Selectors
CSS class selector tìm element có class attribute cụ thể. Cú pháp: dấu chấm (.) + tên class.
Muốn target class "boxMiddle" → selector .boxMiddle.
Ví dụ: design box web page, background hồng. Box có class "pinkBox". Code set color element class "pinkBox" = hồng:
.pinkBox { color: pink; }
Mọi element class "pinkBox" → set pink.
Thêm: chỉ định specific element với class cụ thể bị affect bởi style. Chỉ dùng class selector → mọi element với class đó bị affect.
Nếu dùng class selector tiền tố element type → apply style CHỈ cho specific element với class đó. Ví dụ: background color mọi <div> tag class "pinkBox" = pink:
div.pinkBox { color: pink; }
Style chỉ apply cho <div> tag class "pinkBox".
CSS Universal Selector
CSS universal selector chọn TẤT CẢ element trên web page. Dấu sao (*) theo sau không element name. Thường dùng set margin hoặc default font cho web page.
Giả sử muốn all element căn giữa trang:
* { text-align: center; }
Rule apply style "text-align: center" cho MỌI item trên web page.
CSS Descendant Selectors
CSS descendant selector chọn element là descendant của element khác để apply range style. Cú pháp: element + space + descendant element muốn select.
Giả sử muốn background color all link trong list = vàng. Nhưng KHÔNG muốn affect link khác trên page. Code:
li a { background-color: yellow; }
Style dùng descendant selector "li a". Nghĩa: style chỉ apply cho all <a> tag TRONG <li> tag. KHÔNG apply cho <a> tag khác trên page.
CSS Selector Lists
Nếu >1 element cần apply specific style → dùng selector list. Selector list apply rule cho all individual selector trong list.
Giả sử 2 CSS rule cùng style:
h2 { text-align: center; }
.alignCenter { text-align: center; }
Gộp 2 rule thành selector list: thêm dấu phẩy giữa style:
h2, .alignCenter { text-align: center; }
Code function giống ví dụ 1. Nhưng ví dụ 2 dùng selector list → code concise hơn.
CSS Grouping Selectors
CSS grouping selector apply set style cho multiple selector. Dùng reduce repetition, write clearer code. Cú pháp: list element selector cách nhau bởi dấu phẩy, theo sau CSS rules apply cho elements.
Giả sử web page dùng styles:
h1 { text-align: center; font-size: 32px; font-weight: normal; }
h2 { text-align: center; font-size: 24px; font-weight: normal; }
h3 { text-align: center; font-size 18px; font-weight: normal; }
Code này: "font-weight: normal" và "text-align: center" shared all selector. Để reduce repetition, group styles dùng grouping selector:
h1, h2, h3 { text-align: center; font-weight: normal; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
Group 2 style giống nhau (text-align, font-weight). Code dễ đọc hơn.
Kết Luận
CSS selectors cho phép apply style cho particular element hoặc range element trên web page. Nhiều selector: id, class, grouping selector... tạo precise CSS styles.
Bài chỉ scratch surface của CSS selectors. Còn attribute selectors, pseudo-classes/elements, combinators, selectors khác dùng trong CSS. Muốn develop advanced rules → research sâu các selector này.
Tutorial thảo luận với ví dụ cách dùng most commonly-used selectors trong CSS. Bạn đã có knowledge dùng CSS selectors tạo style như expert.
Advice top CSS learning resources, courses, books: check How to Learn CSS guide.