CSS Selectors(HoangNM)

Khái niệm
1. Selector là cách chọn một hoặc nhiều phần tử HTML để thiết lập style cho phần tử đó
CSS Selectors đơn giản
1. Tag name
  1. Cách đơn giản nhất là chọn phần tử theo tên thẻ HTML
2. Class name
  1. Đặt class cho những phần tử có đặc điểm chung để tuỳ chỉnh style cho nhóm phần tử này.
  2. Khi viết CSS, sử dụng dấu "." trước tên class
  3. Một phần tử có thể có nhiều class, các class viết cách nhau 1 dấu cách.
3. Id (identifier)
  1. Là mã định danh cho mỗi phần tử HTML, thường không được sử dụng như một cách chính thống để style.
  2. Là duy nhất trên 1 file HTML
  3. Mang tính duy nhất
  4. Khi sử dụng CSS, sử dụng dấu "#" trước tên id
4. Lưu ý
  1. Tên các class, id không bắt đầu bằng số, không dùng tiếng Việt, không chứa khoảng trắng và ký tự đặc biệt.
  2. Tuân thủ quy tắc đặt tên kebab-case
CSS Combinator Selectors (bộ chọn kết hợp)
1. Là cách chọn các phần tử dựa trên mối quan hệ giữa chúng
2. Descendant combinator (space)
  1. Còn gọi là bộ chọn tổ tiên.
  2. Chọn tất cả các hậu duệ của một phần tử "tổ tiên"
3. Child combinator (>)
  1. Còn gọi là bộ chọn con cái (bộ chọn thế hệ F1)
  2. Chọn phần tử con trực tiếp của phần tử cha
4. Adjacent sibling combinator (+)
  1. Còn gọi là bộ chọn anh chị em liền kề
  2. Chọn phần tử ngay sau một phần tử
5. General sibling combinator (~)
  1. Gần giống với bộ chọn anh em liền kề, bộ chọn anh em sẽ chọn toàn bộ các phần tử "em" của một phần tử.
  2. VD: h1 ~ p: chọn tất cả các thẻ p ngay sau và ngang hàng thẻ h1
6. Bộ chọn gộp
  1. Đây không hoàn toàn là một selector độc lập, đây là cách viết kết hợp những selectors có chung bộ thuộc tính
  2. Các selectors ngăn cách nhau bởi dấu ","
CSS Attribute Selectors
1. Là bộ chọn dựa trên thuộc tính của thẻ HTML
2. input[type]
  1. Chọn phần tử tồn tại 1 thuộc tính nào đó
  2. Chọn tất cả các thẻ input có thuộc tính type
3. input[type='username']
  1. Chọn phần tử có giá trị thuộc tính cụ thể
  2. Chọn tất cả các thẻ input có thuộc tính type với giá trị là "username"
4. a[href^='https']
  1. Chọn phần tử mà giá trị thuộc tính bắt đầu bằng chuỗi cụ thể
  2. Chọn tất cả các thẻ a có thuộc tính href nhận giá trị bắt đầu bằng "https"
5. img[src$='.png']
  1. Chọn phần tử mà giá trị thuộc tính kết thúc bằng chuỗi cụ thể
  2. Chọn tất cả các thẻ img có thuộc tính src nhận giá trị là các ảnh định dạng png
6. a[href*='google']
  1. Chọn phần tử mà giá trị thuộc tính có chứa chuỗi cụ thể
  2. Chọn tất cả các thẻ a có thuộc tính href nhận giá trị có chuỗi "google"
Pseudo-classes
1. Chọn các phần tử dựa trên trạng thái hoặc đặc tính động của chúng
2. Theo trạng thái
  1. :hover
    1. Trạng thái được di con trỏ chuột lên trên phần tử
  2. :active
    1. Chỉ định phần tử được chọn
    2. Chỉ hoạt động khi phần tử đang được click, nếu nhả chuột ra, trạng thái active sẽ không còn
  3. :focus
    1. Phần tử được focus từ bàn phím, ví dụ như input, textarea, select, v.v.
  4. :visited
    1. Thường xuất hiện ở các thẻ a
    2. Thể hiện 1 anchor đã từng được duyệt
  5. Ngoài ra còn nhiều trạng thái khác
3. Theo vị trí của phần tử
  1. :first-child, last-child
    1. Chọn phần tử con đầu tiên hoặc cuối cùng của một phần tử cha
    2. .parent div:first-child
  2. :nth-child(n)
    1. Chọn phần tử con cụ thể số thứ "n" của phần tử cha
    2. Khi muốn chọn các con theo vị trí đan xen, có thể dùng keyword "odd", "even" hoặc 2n, 2n-1
  3. :nth-of-type(n)
    1. Tương tự như nth-child nhưng phân biệt loại tag name
  4. :not(selector)
    1. Bộ chọn này loại trừ những phần tử có đặc tính nào đó
    2. input:not([type='password']): loại trừ các thẻ input có type="password"
    3. p:not(.exclude): Chọn các thẻ p nhưng loại trừ thẻ p có class "exclude"
    4. li:not(:first-child): Chọn thẻ li nhưng loại trừ thẻ li đầu tiên
  5. Lưu ý: Chỉ áp dụng với phần tử con trực tiếp, không áp dụng với phần tử cháu chắt
Pseudo-elements
1. Pseudo-element cho phép thêm nội dung vào phần tử mà không cần thay đổi cấu trúc HTML
2. Thường được áp dụng cho những nội dung HTML chỉ mang ý nghĩa trang trí, không mang nội dung cụ thể, không cần thiết cho SEO.
3. ::before và ::after
  1. Sử dụng để thêm nội dung vào phần tử mà không thay đổi cấu trúc HTML
  2. Khi sử dụng bắt buộc phải có thuộc tính content: "" cho dù content chỉ nhận chuỗi rỗng.
  3. Thường đây là những nội dung phụ, không mang ý nghĩa cụ thể mà chỉ nhằm mục đích tạo hiệu ứng UI. VD như: Gạch chân, ký tự quotes ("), .v.v
  4. Không thể sử dụng nhiều ::before hoặc nhiều ::after trên cùng 1 phần tử
4. ::first-letter
  1. Chọn ký tự đầu tiên
  2. Biểu đạt một trích dẫn, một bài văn, một bức thư, một bài báo.
5. ::first-line
  1. Chọn dòng đầu tiên
  2. Biểu đạt bắt đầu một đoạn văn mới, nội dung cần gây sự chú ý về UI mà không mang ngữ nghĩa cụ thể.
6. ::marker
  1. Style cho marker của thẻ li
7. ::placeholder
  1. Style cho placeholder của những thẻ input, textarea, v.v.
8. Lưu ý
  1. Các pseudo-element là inline
  2. Các pseudo-element có đầy đủ các thuộc tính style như một phần tử HTML riêng biệt
Kết hợp các pseudo
1. Khi kết hợp các pseudo-classes và pseudo-elements cho cùng một phần tử, bắt buộc viết pseudo-classes trước.
2. VD: a:hover::before
Importaint
1. Là một keyword đặc biệt để đánh dấu một thuộc tính CSS là quan trọng.
2. Ghi đè toàn bộ thứ tự ưu tiên của các bộ chọn khác (kể cả CSS inline)
3. Tránh lạm dụng important để làm code khó đọc, khó bảo trì.
4. Thường chỉ sử dụng khi thực sự cần thiết.
Độ ưu tiên
1. Trọng số theo vị trí viết CSS
  1. Độ ưu tiên của CSS Inline cao hơn CSS Internal và CSS External
  2. Độ ưu tiên của CSS Internal và External là như nhau, CSS được đọc sau sẽ xếp chồng CSS được đọc trước.
2. Trọng số theo selectors
  1. Trọng số cao: ID
  2. Trọng số trung bình: class, pseudo-class, attribute selectors.
  3. Trọng số thấp: tag name, pseudo-element
  4. Không được ưu tiên: universal selector (*)
3. Nguyên tắc tính điểm ưu tiên
  1. Tính điểm theo trọng số các bộ chọn
  2. Nếu ngang điểm về trọng số các bộ chọn, tính điểm theo mức độ cụ thể của bộ chọn.
  3. !important phá vỡ quy tắc tính điểm ưu tiên thông thường.
  4. Khi cùng một thuộc tính CSS sử dụng !important ở 2 vị trí, tính điểm như không có !important giữa 2 !important với nhau.