Tạo kiểu có điều kiện cho các phần tử đã chọn trong vùng chứa lưới

Lịch, giỏ hàng, phòng trưng bày, trình khám phá tệp và thư viện trực tuyến là một số tình huống trong đó các mục có thể chọn được hiển thị dưới dạng lưới (tức là mạng hình vuông). Bạn biết đấy, ngay cả những kiểm tra bảo mật yêu cầu bạn chọn tất cả các hình ảnh có đường băng qua đường hoặc bất cứ thứ gì.

Tôi đã tìm thấy một cách gọn gàng để hiển thị các tùy chọn có thể chọn trong lưới. Không, không phải tạo lại reCAPTCHA đó, mà chỉ đơn giản là có thể chọn nhiều mục. Và khi hai hoặc nhiều mục liền kề được chọn, chúng ta có thể sử dụng :nth-of-type tổ hợp, phần tử giả và :checked lớp giả để tạo kiểu cho chúng theo cách mà chúng trông được nhóm lại với nhau.

Toàn bộ ý tưởng về tổ hợp và giả để có được các hộp kiểm làm tròn đến từ một bài báo trước tôi đã viết. Đó là một thiết kế một cột đơn giản:

Tuy nhiên, lần này, hiệu ứng làm tròn được áp dụng cho các phần tử dọc theo cả trục dọc và trục ngang trên lưới. Bạn không cần phải đọc bài viết cuối cùng của tôi về kiểu hộp kiểm cho việc này vì tôi sẽ trình bày mọi thứ bạn cần biết ở đây. Nhưng nếu bạn quan tâm đến việc thu gọn những gì chúng tôi đang làm trong bài viết này, thì đó là một trong những điều đáng để thử.

Trước khi chúng ta bắt đầu…

Sẽ rất hữu ích cho bạn nếu bạn lưu ý một số điều. Ví dụ: tôi đang sử dụng HTML và CSS tĩnh trong bản trình diễn của mình vì mục đích đơn giản. Tùy thuộc vào ứng dụng của bạn, bạn có thể phải tạo lưới và các mục trong đó một cách động. Tôi đang bỏ qua các kiểm tra thực tế về khả năng tiếp cận để tập trung vào hiệu ứng, nhưng bạn chắc chắn sẽ muốn xem xét điều đó trong môi trường sản xuất.

Ngoài ra, tôi đang sử dụng CSS Grid cho bố cục. Tôi khuyên bạn nên giống nhau nhưng tất nhiên, đó chỉ là sở thích cá nhân và quãng đường của bạn có thể thay đổi. Đối với tôi, việc sử dụng lưới cho phép tôi dễ dàng sử dụng các bộ chọn anh chị em để nhắm mục tiêu một mặt hàng ::before và ::after giả.

Do đó, bất kỳ tiêu chuẩn bố cục nào bạn có thể muốn sử dụng trong ứng dụng của mình, hãy đảm bảo rằng các giả vẫn có thể được nhắm mục tiêu trong CSS và đảm bảo bố cục vẫn nguyên vẹn trên các trình duyệt và màn hình khác nhau.

Hãy bắt đầu ngay bây giờ

Như bạn có thể đã nhận thấy trong bản trình diễn trước đó, việc chọn và bỏ chọn một phần tử hộp kiểm sẽ sửa đổi thiết kế của các hộp, tùy thuộc vào trạng thái lựa chọn của các hộp kiểm khác xung quanh nó. Điều này có thể thực hiện được vì tôi đã tạo kiểu cho mỗi hộp bằng cách sử dụng các phần tử giả của các phần tử liền kề của nó thay vì phần tử riêng của nó.

Hình sau đây cho thấy cách ::before phần tử giả của các hộp trong mỗi cột (ngoại trừ cột đầu tiên) chồng lên các hộp ở bên trái của chúng và cách ::after phần tử giả của các hộp trong mỗi hàng (trừ hàng đầu tiên) chồng lên các ô ở trên.

Đây là mã cơ sở

Đánh dấu khá đơn giản:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Còn một chút nữa đang diễn ra trong CSS ban đầu. Nhưng, trước tiên, chính lưới:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Đó là một lưới gồm năm hàng và bốn cột chứa các hộp kiểm. Tôi quyết định xóa giao diện mặc định của các hộp kiểm, sau đó cung cấp cho chúng nền màu xám nhạt và đường viền siêu tròn của riêng tôi:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Cũng lưu ý rằng bản thân các hộp kiểm là lưới. Đó là chìa khóa để đặt ::before và ::after phần tử giả. Nói về điều đó, hãy làm điều đó ngay bây giờ:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Chúng tôi chỉ chọn các phần tử giả của hộp kiểm không nằm trong cột đầu tiên hoặc hàng đầu tiên của lưới. input:not(:nth-of-type(4n+1)) bắt đầu ở hộp kiểm đầu tiên, sau đó chọn ::before của mọi mục thứ tư từ đó. Nhưng hãy lưu ý rằng chúng tôi đang nói :not(), vì vậy thực sự những gì chúng tôi đang làm là bỏ qua các ::before phần tử giả của mọi hộp kiểm thứ tư, bắt đầu từ hộp kiểm đầu tiên. Sau đó, chúng tôi đang áp dụng các phong cách cho ::after giả của mọi hộp kiểm từ hộp thứ năm.

Bây giờ chúng ta có thể tạo kiểu cho cả hai ::before và ::after giả cho mỗi hộp kiểm không nằm trong cột hoặc hàng đầu tiên của lưới, để chúng được di chuyển sang trái hoặc lên trên, tương ứng, ẩn chúng theo mặc định.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Tạo kiểu cho :checked nhà nước

Bây giờ là tạo kiểu cho các hộp kiểm khi chúng ở trong :checked tiểu bang. Đầu tiên, hãy cung cấp cho họ một màu sắc, nói limegreen lý lịch:

input:checked { background: limegreen; }

Một hộp được đánh dấu sẽ có thể tạo kiểu lại cho tất cả các hộp được đánh dấu liền kề của nó. Nói cách khác, nếu chúng ta chọn hộp kiểm thứ mười một trong lưới, chúng ta cũng có thể tạo kiểu cho các hộp bao quanh nó ở trên cùng, dưới cùng, bên trái và bên phải.

Điều này được thực hiện bằng cách nhắm mục tiêu các phần tử giả chính xác. làm sao chúng ta làm việc đó bây giờ? Vâng, nó phụ thuộc vào số lượng cột thực tế trong lưới. Đây là CSS nếu hai hộp liền kề được chọn trong lưới 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Nếu muốn, bạn có thể tạo động mã trên. Tuy nhiên, một lưới điển hình, chẳng hạn như một thư viện hình ảnh, số lượng cột sẽ nhỏ và có thể là một số lượng mục cố định, trong khi các hàng có thể tiếp tục tăng lên. Đặc biệt nếu được thiết kế cho màn hình di động. Đó là lý do tại sao cách tiếp cận này vẫn là một cách hiệu quả. Nếu vì lý do nào đó mà ứng dụng của bạn có các hàng giới hạn và cột mở rộng, thì hãy cân nhắc xoay lưới sang một bên vì, với một dòng các mục, CSS Grid sắp xếp chúng từ trái sang phải và từ trên xuống dưới (tức là từng hàng một) .

Chúng tôi cũng cần thêm kiểu cho các hộp kiểm cuối cùng trong lưới - chúng không phải tất cả đều được bao phủ bởi các phần tử giả vì chúng là các mục cuối cùng trong mỗi trục.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Đó là một số bộ chọn phức tạp! Cái đầu tiên…

input:nth-of-type(4n-1):checked + input:checked

… Về cơ bản đang nói điều này:

A đã kiểm tra <input> phần tử bên cạnh một <input> trong cột cuối cùng thứ hai.

Và nth-of-type được tính như thế này:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Vì vậy, chúng tôi đang bắt đầu ở hộp kiểm thứ ba và chọn mọi hộp kiểm thứ tư từ đó. Và nếu một hộp kiểm trong chuỗi đó được chọn, thì chúng tôi cũng tạo kiểu cho các hộp kiểm liền kề, nếu chúng cũng được chọn.

Và dòng này:

input:nth-of-type(4n):checked + * + * + * + input:checked

Đang nói điều này:

An <input> phần tử với điều kiện là phần tử được kiểm tra, trực tiếp liền kề với một phần tử, phần tử này liền kề trực tiếp với phần tử khác, phần tử này cũng liền kề trực tiếp với phần tử khác, đến lượt nó, trực tiếp liền kề với một phần tử <input> phần tử ở trạng thái đã kiểm tra.

Điều đó có nghĩa là chúng tôi đang chọn mọi hộp kiểm thứ tư được chọn. Và nếu một hộp kiểm trong trình tự đó được chọn, thì chúng tôi đánh dấu hộp kiểm thứ tư tiếp theo từ hộp kiểm đó nếu hộp kiểm đó cũng được chọn.

Đưa nó vào sử dụng

Những gì chúng ta vừa xem xét là nguyên tắc chung và logic đằng sau thiết kế. Một lần nữa, nó hữu ích như thế nào trong ứng dụng của bạn sẽ phụ thuộc vào thiết kế lưới.

Tôi đã sử dụng các đường viền tròn, nhưng bạn có thể thử các hình dạng khác hoặc thậm chí thử nghiệm với các hiệu ứng nền (Temani đã giúp bạn tìm kiếm ý tưởng). Bây giờ bạn đã biết công thức hoạt động như thế nào, phần còn lại hoàn toàn tùy thuộc vào trí tưởng tượng của bạn.

Đây là một ví dụ về cách nó có thể trông như thế nào trong một lịch đơn giản:

Một lần nữa, đây chỉ là một nguyên mẫu thô sử dụng đánh dấu tĩnh. Và, sẽ có rất nhiều và rất nhiều cân nhắc về khả năng truy cập cần xem xét trong một tính năng lịch.

---

Đó là một bọc! Khá gọn gàng, phải không? Ý tôi là, không có gì chính xác là "mới" về những gì đang xảy ra. Nhưng đó là một ví dụ điển hình về lựa chọn những thứ trong CSS. Nếu chúng ta có khả năng xử lý các kỹ thuật chọn nâng cao hơn sử dụng tổ hợp và giả, thì khả năng tạo kiểu của chúng ta có thể vượt xa việc tạo kiểu cho một mục - như chúng ta đã thấy, chúng ta có thể tạo kiểu có điều kiện cho các mục dựa trên trạng thái của phần tử khác.

---

Tạo kiểu có điều kiện cho các phần tử đã chọn trong vùng chứa lưới ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. TRUY CẬP MIỄN PHÍ.
• CryptoHawk. Radar Altcoin. Dùng thử miễn phí.
• Nguồn: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/