การจัดรูปแบบองค์ประกอบที่เลือกแบบมีเงื่อนไขในคอนเทนเนอร์กริด

ปฏิทิน ตะกร้าสินค้า แกลเลอรี่ โปรแกรมสำรวจไฟล์ และห้องสมุดออนไลน์เป็นบางสถานการณ์ที่รายการที่เลือกได้จะแสดงเป็นตาราง (เช่น ตะแกรงสี่เหลี่ยม) รู้ไหม แม้แต่การตรวจสอบความปลอดภัยที่ขอให้คุณเลือกภาพทั้งหมดที่มีทางม้าลายหรืออะไรก็ตาม

ฉันพบวิธีที่เรียบร้อยในการแสดงตัวเลือกที่เลือกได้ในตาราง ไม่ ไม่ใช่การสร้าง reCAPTCHA นั้นใหม่ แต่สามารถเลือกได้หลายรายการ และเมื่อเลือกรายการที่อยู่ติดกันตั้งแต่สองรายการขึ้นไป เราก็สามารถใช้ ฉลาดได้ :nth-of-type ตัวรวมองค์ประกอบเทียมและ :checked pseudo-class เพื่อจัดสไตล์ให้ดูเป็นกลุ่ม

แนวคิดทั้งหมดของ combinators และ pseudos เพื่อให้ได้ช่องทำเครื่องหมายที่โค้งมนมาจากa บทความก่อนหน้านี้ฉันเขียน. เป็นการออกแบบคอลัมน์เดียวที่เรียบง่าย:

อย่างไรก็ตาม ในครั้งนี้ เอฟเฟกต์การปัดเศษจะถูกนำไปใช้กับองค์ประกอบตามแกนแนวตั้งและแนวนอนบนตาราง คุณไม่จำเป็นต้องอ่านบทความล่าสุดของฉันเกี่ยวกับการจัดรูปแบบช่องทำเครื่องหมายสำหรับสิ่งนี้ เนื่องจากฉันจะครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้ที่นี่ แต่ถ้าคุณสนใจที่จะลดขนาดสิ่งที่เรากำลังทำในบทความนี้ สิ่งนั้นก็คุ้มค่าที่จะลองดู

ก่อนที่เราจะเริ่มต้น...

การจดบันทึกบางสิ่งจะเป็นประโยชน์สำหรับคุณ ตัวอย่างเช่น ฉันใช้ HTML และ CSS แบบคงที่ในการสาธิตของฉันเพื่อความเรียบง่าย คุณอาจต้องสร้างกริดและรายการในแบบไดนามิก ทั้งนี้ขึ้นอยู่กับแอปพลิเคชันของคุณ ฉันกำลังละเว้นการตรวจสอบการช่วยสำหรับการเข้าถึงในเชิงปฏิบัติเพื่อมุ่งเน้นไปที่ผลกระทบ แต่คุณจะต้องการพิจารณาสิ่งนั้นในสภาพแวดล้อมการผลิต

นอกจากนี้ ฉันกำลังใช้ CSS Grid สำหรับเลย์เอาต์ ฉันก็อยากแนะนำเหมือนกัน แต่แน่นอนว่า เป็นเพียงความชอบส่วนบุคคลเท่านั้น และระยะทางของคุณอาจแตกต่างกันไป สำหรับฉัน การใช้กริดทำให้ฉันใช้ตัวเลือกพี่น้องเพื่อกำหนดเป้าหมายรายการได้อย่างง่ายดาย ::before และ ::after หลอก

ดังนั้น ไม่ว่ามาตรฐานเลย์เอาต์ใดก็ตามที่คุณอาจต้องการใช้ในแอปพลิเคชันของคุณ ตรวจสอบให้แน่ใจว่าหลอกยังสามารถกำหนดเป้าหมายใน CSS ได้ และตรวจดูให้แน่ใจว่าเลย์เอาต์อยู่ในชั้นเชิงในเบราว์เซอร์และหน้าจอต่างๆ

มาเริ่มกันเลย

ตามที่คุณอาจสังเกตเห็นในการสาธิตก่อนหน้านี้ การเลือกและยกเลิกการเลือกองค์ประกอบช่องทำเครื่องหมายจะปรับเปลี่ยนการออกแบบของกล่อง โดยขึ้นอยู่กับสถานะการเลือกของช่องทำเครื่องหมายอื่นๆ ที่อยู่รอบๆ สิ่งนี้เป็นไปได้เพราะฉันกำหนดสไตล์แต่ละกล่องโดยใช้องค์ประกอบหลอกขององค์ประกอบที่อยู่ติดกันแทนที่จะเป็นองค์ประกอบของตัวเอง

รูปต่อไปนี้แสดงให้เห็นว่า ::before องค์ประกอบหลอกของกล่องในแต่ละ คอลัมน์ (ยกเว้นคอลัมน์แรก) ซ้อนกล่องทางด้านซ้าย และวิธี ::after องค์ประกอบหลอกของกล่องในแต่ละ แถว (ยกเว้นแถวแรก) ซ้อนทับช่องด้านบน

นี่คือรหัสฐาน

มาร์กอัปค่อนข้างตรงไปตรงมา:

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

มีอะไรเกิดขึ้นอีกเล็กน้อยใน CSS เริ่มต้น แต่ก่อนอื่น ตัวกริดเอง:

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

นั่นคือตารางที่มีห้าแถวและสี่คอลัมน์ที่มีช่องทำเครื่องหมาย ฉันตัดสินใจลบลักษณะเริ่มต้นของช่องทำเครื่องหมาย จากนั้นให้พื้นหลังสีเทาอ่อนของฉันและเส้นขอบที่โค้งมนสุด ๆ แก่พวกเขา:

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

โปรดสังเกตด้วยว่าช่องทำเครื่องหมายเองเป็นกริด นั่นคือกุญแจสำคัญในการวาง ::before และ ::after องค์ประกอบหลอก พูดถึงสิ่งนั้น เรามาทำกันตอนนี้เลย:

/* 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;
}

เรากำลังเลือกเฉพาะองค์ประกอบหลอกของช่องทำเครื่องหมายที่ไม่ได้อยู่ในคอลัมน์แรกหรือแถวแรกของตาราง input:not(:nth-of-type(4n+1)) เริ่มต้นที่ช่องทำเครื่องหมายแรก จากนั้นเลือก ::before ของทุกรายการที่สี่จากที่นั่น แต่สังเกตว่าเรากำลังพูดว่า :not(), ดังนั้นสิ่งที่เราทำจริงๆคือ การกระโดดข้าม ::before องค์ประกอบหลอกของช่องทำเครื่องหมายทุกช่องที่สี่ โดยเริ่มจากช่องแรก จากนั้นเราก็นำสไตล์ไปใช้กับ ::after หลอกทุกช่องทำเครื่องหมายจากช่องที่ห้า

ตอนนี้เราสามารถจัดสไตล์ทั้ง ::before และ ::after หลอกสำหรับแต่ละช่องทำเครื่องหมายที่ไม่ได้อยู่ในคอลัมน์หรือแถวแรกของตาราง เพื่อให้ถูกย้ายไปทางซ้ายหรือด้านบนตามลำดับ โดยซ่อนไว้ตามค่าเริ่มต้น

/* 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); }

จัดแต่งทรงผม :checked รัฐ

ตอนนี้มากำหนดสไตล์ช่องกาเครื่องหมายเมื่ออยู่ใน a :checked สถานะ. ขั้นแรก ให้สีแก่พวกเขา พูดว่า a limegreen พื้นหลัง:

input:checked { background: limegreen; }

กล่องกาเครื่องหมายควรจัดรูปแบบใหม่ให้กับกล่องกาเครื่องหมายที่อยู่ติดกันทั้งหมด กล่าวอีกนัยหนึ่ง หากเราเลือกช่องทำเครื่องหมายที่สิบเอ็ดในตาราง เราก็ควรจะสามารถจัดรูปแบบกล่องที่อยู่รอบๆ ที่ด้านบน ด้านล่าง ด้านซ้ายและด้านขวาได้

ซึ่งทำได้โดยการกำหนดเป้าหมายองค์ประกอบหลอกที่ถูกต้อง เราจะทำอย่างนั้นได้อย่างไร? ขึ้นอยู่กับจำนวนคอลัมน์จริงในตาราง นี่คือ CSS หากเลือกกล่องที่อยู่ติดกันสองกล่องในตาราง 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;
}

หากคุณต้องการ คุณสามารถสร้างโค้ดด้านบนแบบไดนามิกได้ อย่างไรก็ตาม ในตารางทั่วไป เช่น แกลเลอรีรูปภาพ จำนวนคอลัมน์จะน้อยและมีแนวโน้มว่าจะเป็นจำนวนที่แน่นอน ในขณะที่แถวอาจเพิ่มขึ้นเรื่อยๆ โดยเฉพาะถ้าออกแบบมาสำหรับหน้าจอมือถือ นั่นเป็นเหตุผลที่วิธีการนี้ยังคงเป็นวิธีที่มีประสิทธิภาพ หากด้วยเหตุผลบางอย่าง แอปพลิเคชันของคุณมีแถวที่จำกัดและคอลัมน์ที่กำลังขยาย ให้พิจารณาหมุนตารางไปด้านข้าง เนื่องจาก CSS Grid จะจัดเรียงรายการเหล่านี้จากซ้ายไปขวาและจากบนลงล่าง (เช่น ทีละแถว) .

เรายังจำเป็นต้องเพิ่มสไตล์สำหรับช่องทำเครื่องหมายสุดท้ายในตาราง — ไม่ได้ครอบคลุมโดยองค์ประกอบหลอกทั้งหมด เนื่องจากเป็นรายการสุดท้ายในแต่ละแกน

/* 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;
}

นี่เป็นตัวเลือกที่ยุ่งยาก! อันแรก…

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

…โดยพื้นฐานแล้วพูดแบบนี้:

ตรวจสอบแล้ว <input> องค์ประกอบถัดจากการตรวจสอบ <input> ในคอลัมน์สุดท้ายที่สอง

และ nth-of-type คำนวณได้ดังนี้

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

ดังนั้นเราจึงเริ่มต้นที่ช่องทำเครื่องหมายที่สามและเลือกทุก ๆ สี่จากที่นั่น และถ้าช่องทำเครื่องหมายในลำดับนั้นถูกเลือก เราก็จัดรูปแบบช่องทำเครื่องหมายที่อยู่ติดกันด้วย หากเลือกไว้ด้วย

และบรรทัดนี้:

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

กำลังพูดแบบนี้:

An <input> องค์ประกอบที่ตรวจสอบแล้วอยู่ติดกับองค์ประกอบโดยตรงซึ่งอยู่ติดกับองค์ประกอบอื่นซึ่งอยู่ติดกับองค์ประกอบอื่นโดยตรงซึ่งในทางกลับกันจะติดกับ <input> องค์ประกอบที่อยู่ในสถานะตรวจสอบ

หมายความว่าเรากำลังเลือกช่องทำเครื่องหมายทุกช่องที่สี่ที่ทำเครื่องหมายไว้ และถ้าช่องทำเครื่องหมายในลำดับนั้นถูกเลือกไว้ เราจะกำหนดรูปแบบช่องทำเครื่องหมายที่สี่ถัดไปจากช่องทำเครื่องหมายนั้นด้วย หากเลือกช่องนั้นด้วย

เอาไปปรับใช้

สิ่งที่เราเพิ่งดูไปคือหลักการทั่วไปและตรรกะที่อยู่เบื้องหลังการออกแบบ อีกครั้ง ประโยชน์ในแอปพลิเคชันของคุณจะขึ้นอยู่กับการออกแบบกริด

ฉันใช้เส้นขอบที่โค้งมน แต่คุณสามารถลองใช้รูปทรงอื่นๆ หรือแม้แต่ทดลองกับเอฟเฟกต์พื้นหลัง (Temani ได้ครอบคลุมความคิดของคุณ). ตอนนี้คุณรู้แล้วว่าสูตรทำงานอย่างไร ที่เหลือก็ขึ้นอยู่กับจินตนาการของคุณ

ต่อไปนี้คือตัวอย่างรูปลักษณ์ในปฏิทินง่ายๆ:

อีกครั้ง นี่เป็นเพียงต้นแบบคร่าวๆ โดยใช้มาร์กอัปแบบคงที่ และมีข้อควรพิจารณาเกี่ยวกับการเข้าถึงข้อมูลมากมายที่ต้องพิจารณาในฟีเจอร์ปฏิทิน

---

นั่นห่อ! สวยเรียบร้อยใช่มั้ย? ฉันหมายความว่า ไม่มีอะไร "ใหม่" อย่างแน่นอนเกี่ยวกับสิ่งที่เกิดขึ้น แต่ก็เป็นตัวอย่างที่ดีของ การเลือกสิ่งของ ใน CSS หากเรามีเทคนิคการเลือกขั้นสูงที่ใช้เครื่องผสมผสานและการจำลอง พลังการจัดสไตล์ของเราสามารถเข้าถึงได้ไกลกว่าการจัดสไตล์รายการเดียว ดังที่เราเห็น เราสามารถจัดรูปแบบรายการตามเงื่อนไขตามสถานะขององค์ประกอบอื่นได้

---

การจัดรูปแบบองค์ประกอบที่เลือกแบบมีเงื่อนไขในคอนเทนเนอร์กริด เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

• คอยน์สมาร์ท การแลกเปลี่ยน Bitcoin และ Crypto ที่ดีที่สุดในยุโรป
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าฟรี
• คริปโตฮอว์ก เรดาร์ Altcoin ทดลองฟรี.
• ที่มา: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/