CSS selectors cheatsheet & details

CSS selectors cheatsheet & details

📜 CSS selectors cheatsheet

Gần đây, tôi đã đi sâu vào tìm hiểu về CSS Selectors.

Có rất nhiều CSS selector với các ký hiệu không quen thuộc,>. , * + ~ [], v.v., vì vậy thường dễ dẫn đến nhầm lẫn về cách hoạt động của các CSS selector. Cuối cùng, tôi đã tìm hiểu chúng và thiết kế lại chúng theo cách tôi hiểu.!

Thực tế, tôi đã muốn sắp xếp chúng trên một trang khổ A4 duy nhất để tiết kiệm giấy và góp phần bảo vệ môi trường, nhưng không thể, vì có quá nhiều CSS Selector mà tôi muốn thêm vào nên phải sắp xếp chúng trên nhiều hơn một trang. Tổng cộng cần bốn trang A4, ngoại trừ các trang bìa.

Các bạn hãy in bảng này ra và dán lên tường. Đừng ghi nhớ chúng, chỉ xem khi bạn muốn tìm những CSS selector mà bạn cần phải sử dụng trong quá trình học và làm việc. Hy vọng bảng thông tin này sẽ giúp bạn tìm thấy các CSS selector thích hợp một cách nhanh chóng và tiết kiệm thời gian của mình.

CSS Selector CheatSheet

Trò chơi bộ chọn CSS của Ryan Yu

🔮 Hãy tải xuống trọn bộ bảng CSS selector cheatsheet và hãy cùng tham gia chơi một Trò chơi thú vị nhé 🕹! Tất cả đều miễn phí các bạn nhé.!

🔎 Đi sâu vào CSS selector.

Ở đây tôi sẽ liệt kê ra đồ họa kiểu sơ đồ cây cùng với các định nghĩa của MDN để giúp bạn làm việc dễ dàng hơn.

Type Selector

CSS type selector khớp với các phần tử theo tên thẻ (HTML tag). Nói cách khác, nó chọn tất cả các phần tử của thẻ đã cho trong một trang - MDN

CSS Selector Type

ID Selector

Chọn một phần tử dựa trên giá trị của thuộc tính id của nó. Chỉ nên có một phần tử với một ID nhất định trong một trang - MDN

ID Selector

Selector con cháu

Bất kỳ phần tử nào khớp với B là con của một phần tử khớp với A (nghĩa là phần tử con hoặc phần tử con của một phần tử con, v.v.). tổ hợp là một hoặc nhiều khoảng trắng hoặc dấu >. - MDN

Selector con cháu

Kết hợp Selector Con cháu & ID

Kết hợp Selector con cháu và ID

Class selector

Class CSS selector so khớp các phần tử dựa trên nội dung của thuộc tính class của chúng. – MDN

Class Selector

Kết hợp Class selector

Kết hợp Class Selector

Tổ hợp Selector với dấu phẩy (,)

Bất kỳ phần tử nào phù hợp với A và / hoặc B. – MDN

Tổ hợp selector với dấu ,

Selector chung (*) Chọn tất cả các phần tử trong trang web. MDN

Selector chung (*)

Kết hợp Selector chung

Kết hợp Selector chung

Selector anh chị em liền kề

Chọn phần tử khớp với Selector bên phải dấu (+) chỉ khi nó nằm ngay sau phần tử khớp với Selector bên trái dấu (+) và cả hai đều là con của cùng một phần tử cha. - MDN

Selector anh chị em liền kề

Selector anh chị em chung (~)

Chọn phần tử tương ứng với Selector bên phải dấu (~) chỉ khi phần tử đó theo sau phần tử tương ứng Selector bên trái dấu (~) (không nhất thiết phải liền kề) và cả hai đều là con của cùng một phần tử cha. - MDN

Selector anh chị em chung

Selector con

Dấu (>) được đặt giữa hai CSS selector. Nó chỉ khớp với những phần tử được so khớp bởi Selector bên phải dấu (>) là con của các phần tử được so khớp bởi Selector bên trái dấu (>). - MDN

Selector con

Selector lớp giả :first-child

Lớp giả CSS :first-child đại diện cho phần tử đầu tiên trong một nhóm các phần tử anh em(có cùng phần tử cha). - MDN

Selector lớp giả :first-child

Selector lớp giả :only-child

Lớp giả CSS :only-child đại diện cho một phần tử không có bất kỳ anh chị em nào. Điều này cũng giống như :first-child :last-child hoặc :nth-child(1) :n-last-child(1), nhưng với độ ưu tiên thấp hơn. - MDN

Selector lớp giả :only-child

Selector lớp giả :last-child

Lớp giả CSS :last-child đại diện cho phần tử cuối cùng trong một nhóm các phần tử anh em(có cùng phần tử cha). - MDN

Selector lớp giả :last-child

Selector lớp giả Nth Child :nth-child()

Lớp giả CSS :nth-child() đối sánh các phần tử dựa trên vị trí của chúng trong một nhóm anh chị em(có cùng phần tử cha). - MDN

Selector lớp giả nth-child()

Selector con thứ N tính từ cuối:nth-last-child()

Lớp giả CSS :nth-last-child() đối sánh các phần tử dựa trên vị trí của chúng giữa một nhóm anh chị em(có cùng phần tử cha), tính từ cuối. - MDN

Selector lớp giả con thứ N tính từ cuối :nth-last-child

Selector đầu tiên của một loại phần tử :first-of-type

Lớp giả CSS :first-of-type đại diện cho phần tử đầu tiên của loại phần tử trong một nhóm các phần tử anh em. - MDN

Selector đầu tiên của 1 loại phần tử :first-of-type

Selector thứ N của loại phần tử :nth-of-type

Lớp giả CSS :nth-of-type() khớp với các phần tử của một kiểu nhất định, dựa trên vị trí của chúng giữa một nhóm anh chị em. - MDN

Selector thứ N của loại phần tử :nth-of-type

Selector thứ n của loại phần tử với n là 1 biểu thức

Selector thứ n của loại phần tử với n là 1 biểu thức

🔮 Lưu ý:
:nth-of-type(chẵn)
:nth-of-type(lẻ)
:nth-of-type(2)
:nth-of-type(2n)
:nth-of-type(3n-1)
:nth-of-type(2n + 2)

Selector duy nhất của loại phần tử :only-of-type Lớp giả CSS :only-of-type đại diện cho một phần tử không có anh chị em cùng loại. - MDN

Selector duy nhất của loại phần tử :only-of-type

Selector cuối cùng của loại phần tử :last-of-type

Lớp giả CSS :last-of-type đại diện cho phần tử cuối cùng của loại nó trong một nhóm các phần tử anh em cùng loại. - MDN

Selector cuối cùng của loại phần tử :last-of-type

Selector trống :empty

Lớp giả CSS :empty đại diện cho bất kỳ phần tử nào không có phần tử con. Phần tử con có thể là nút phần tử hoặc văn bản (bao gồm cả khoảng trắng). Nhận xét, hướng dẫn xử lý và nội dung CSS không ảnh hưởng đến việc một phần tử có được coi là trống hay không. - MDN

Selector trống :empty

Selector Lớp giả phủ định :not()

Lớp giả CSS :not() đại diện cho các phần tử không khớp với danh sách các Selector. Vì nó ngăn các mục cụ thể được chọn, nó được gọi là lớp giả phủ định. - MDN

Selector lớp giả phủ định :not

Selector thuộc tính

Selector thuộc tính là một loại Selector đặc biệt sẽ so khớp các phần tử dựa trên các thuộc tính và giá trị thuộc tính của chúng. Cú pháp chung của chúng bao gồm dấu ngoặc vuông ([]) chứa tên thuộc tính theo sau là điều kiện tùy chọn để khớp với giá trị của thuộc tính. Selector thuộc tính có thể được chia thành hai loại tùy thuộc vào cách chúng đối sánh với các giá trị thuộc tính: Selector thuộc tính hiện diện và giá trị và Selector thuộc tính giá trị chuỗi con. - MDN

Selector thuộc tính

Selector giá trị thuộc tính

Selector giá trị thuộc tính

Selector Thuộc tính bắt đầu bằng

Selector này sẽ chọn tất cả các phần tử có thuộc tính attr mà giá trị bắt đầu bằng val.

Selector thuộc tính bắt đầu bằng

Selector Thuộc tính kết thúc bằng

Selector này sẽ chọn tất cả các phần tử có thuộc tính attr mà giá trị kết thúc bằng val

Selector thuộc tính kết thúc bằng

Selector ký tự đại diện thuộc tính

Selector này sẽ chọn tất cả các phần tử có thuộc tính attr mà giá trị chứa chuỗi con là val. (Chuỗi con chỉ đơn giản là một phần của chuỗi, ví dụ: "cat" là chuỗi con trong chuỗi "caterpillar".)

Selector thuộc tính kí tự đại diện

🎉 Xin chúc mừng, bạn đã hoàn thành 🎉

Bài viết được dịch từ bài viết gốc:
https://medium.com/design-code-repository/css-selectors-cheatsheet-details-9593bc204e3f
Người dịch đã thay đổi một số từ ngữ để phù hợp với văn phong tiếng việt, giúp mọi người có thể đọc và hiểu một cách dễ dàng.