CSS Pseudo-Classes กับ Pseudo-Elements: เจาะลึก

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

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

ทำความเข้าใจ CSS Pseudo-Class

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

คลาสหลอกปรับปรุงการโต้ตอบของเว็บไซต์โดยการปรับเปลี่ยนรูปลักษณ์หรือพฤติกรรมขององค์ประกอบเพื่อตอบสนองต่อปฏิสัมพันธ์ของผู้ใช้ เมื่อใช้ร่วมกับตัวเลือก CSS อื่น ๆ ให้การควบคุมทั้งสไตล์และการโต้ตอบอย่างละเอียด

CSS Pseudo-Class ไวยากรณ์และการใช้งาน

ไวยากรณ์สำหรับคลาสหลอก CSS ประกอบด้วยโคลอน (:) ตามด้วยการกำหนดคลาสหลอก ซึ่งมีโครงสร้างดังนี้:

 selector:pseudo-class {
    /* styles */
} 

ในรูปแบบนี้:

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

คลาสหลอกในบริบทนี้หมายถึงคีย์เวิร์ดที่บ่งบอกถึงเงื่อนไขหรือสถานะเฉพาะที่เราต้องการเน้นและจัดการ

Pseudo-class ใน CSS สามารถแบ่งได้กว้าง ๆ เป็นหมวดหมู่ต่าง ๆ ขึ้นอยู่กับหน้าที่และเกณฑ์ที่คลาสเหล่านั้นมีคุณสมบัติ ซึ่งรวมถึง:1. คลาส (ทั่วไป): คลาสหลอกคลาสเหล่านี้ใช้กับองค์ประกอบทั้งหมดภายในหมวดหมู่หรือประเภทเฉพาะ ตัวอย่างได้แก่ โฮเวอร์ โฟกัส และใช้งานอยู่2. คลาสย่อย: คลาสหลอกที่เฉพาะเจาะจงกับหมวดหมู่ย่อยบางหมวดหมู่ขององค์ประกอบ ตัวอย่างเช่น การเข้าชมมีไว้สำหรับลิงก์เท่านั้น3. ลูกหลาน: คลาสหลอกที่เลือกองค์ประกอบที่มีคุณสมบัติสืบทอดเฉพาะ ตัวอย่างจะเป็น:first-child.4 เด็ก: เลือกองค์ประกอบที่เป็นลูกขององค์ประกอบอื่น ตัวอย่าง::last-child.5. พี่น้อง: เลือกระหว่างพี่น้องตั้งแต่สองคนขึ้นไปโดยพิจารณาจากตำแหน่งที่สัมพันธ์กัน

การโต้ตอบของผู้ใช้

:โฮเวอร์

|

สคริปต์เลือกองค์ประกอบที่ระบุเมื่อเคอร์เซอร์เลื่อนไปเหนือองค์ประกอบนั้นโดยใช้เหตุการณ์โฮเวอร์ในตัวใน JavaScript

:คล่องแคล่ว

|

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

มาเยือนแล้ว

|

เลือกลิงค์ที่ผู้ใช้ได้เยี่ยมชม

โครงสร้าง

:ลูกคนแรก

|

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

:ลูกคนสุดท้อง

|

ดึงองค์ประกอบลูกหลานสุดท้ายภายในโหนดพาเรนต์ที่กำหนด

ลูกคนที่ n (n)

|

เลือกและเลือกองค์ประกอบโดยอาศัยตำแหน่งตามลำดับชั้นภายในเอนทิตีแม่ ทำให้สามารถมุ่งเป้าไปที่ลูกหลานโดยเฉพาะได้

แบบฟอร์มที่เกี่ยวข้อง

:พิการ

|

เลือกองค์ประกอบแบบฟอร์มที่ปิดใช้งาน

:ตรวจสอบแล้ว

|

เลือกปุ่มตัวเลือกหรือช่องทำเครื่องหมายที่เลือก

สถานะองค์ประกอบ UI

:ไม่ถูกต้อง

|

เลือกองค์ประกอบของแบบฟอร์มที่ไม่ถูกต้อง

:ที่จำเป็น

|

เลือกฟิลด์ที่จำเป็นขององค์ประกอบแบบฟอร์ม

:ไม่จำเป็น

|

เลือกองค์ประกอบของฟอร์มที่เป็นฟิลด์ตัวเลือก

ลิงค์ที่เกี่ยวข้อง

:ลิงค์

|

เลือกลิงค์ที่ยังไม่ได้เยี่ยมชม

อิงตามภาษา

:lang()

|

เลือกและเลือกองค์ประกอบโดยใช้ข้อมูลทางภาษาที่ได้รับจากแอตทริบิวต์"lang"

เราอาจทดลองใช้เอฟเฟ็กต์โฮเวอร์กับรูปภาพภายในแกลเลอรี โดยที่ตัวเลือกรูปแบบทั่วไปเกี่ยวข้องกับการขยายหรือลดแสงของภาพเมื่อมีการโต้ตอบของผู้ใช้ผ่านการโฮเวอร์

สำรวจองค์ประกอบหลอก CSS

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

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

CSS Pseudo-Element ไวยากรณ์และการนำไปใช้

คลาสเทียมใน CSS ใช้โครงสร้างไวยากรณ์เฉพาะ ซึ่งมีการใช้เครื่องหมายทวิภาคสองตัว (:::) ตามด้วยระบบการตั้งชื่อของคลาสเทียม นิพจน์พื้นฐานสามารถแสดงได้ดังนี้:

 selector::pseudo-element {
    /* styles */
} 

ในรูปแบบนี้:

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

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

นี่คือองค์ประกอบหลอกบางส่วน:

::ก่อน

|

แทรกข้อความที่กำหนดในตำแหน่งเฉพาะภายในเนื้อหาขององค์ประกอบ HTML ที่ระบุ ก่อนเนื้อหาที่มีอยู่

—|—

::หลังจาก

|

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

::จดหมายฉบับแรก

|

ประดับอักขระเริ่มต้นของข้อความที่อยู่ในองค์ประกอบที่กำหนดด้วยการปรับปรุงรูปแบบ

::การคัดเลือก

|

ตกแต่งส่วนข้อความที่เลือกโดยเคอร์เซอร์ของผู้ใช้ด้วยรูปลักษณ์ที่น่าดึงดูด

::เครื่องหมาย

|

ปรับเปลี่ยนการนำเสนอด้วยภาพของแต่ละรายการภายในรายการ เช่น การปรับรูปลักษณ์ของสัญลักษณ์แสดงหัวข้อย่อยหรือตัวบ่งชี้ตัวเลขที่เกี่ยวข้องกับรายการนั้น

::คิว

|

ใช้การกำหนดค่าโวหารบนสัญญาณภายในส่วนประกอบมัลติมีเดีย เช่น และ ซึ่งโดยทั่วไปใช้กับบริบทคำบรรยายและคำบรรยาย

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

ความเหมือนและความแตกต่าง

คลาสหลอกและองค์ประกอบหลอกใน Cascading Style Sheets (CSS) มีความคล้ายคลึงกันบางประการ ขณะเดียวกันก็แสดงความแตกต่างที่โดดเด่นเช่นกัน

|

คลาสหลอก

|

องค์ประกอบหลอก

—|—|—

ไวยากรณ์

|

นำหน้าด้วยโคลอนเดียว (:)

|

นำหน้าด้วยเครื่องหมายทวิภาคสองตัว (::)

การใช้งาน

|

เลือกและจัดรูปแบบส่วนประกอบตามสถานะปัจจุบัน ตำแหน่ง หรือการโต้ตอบของผู้ใช้

|

ใช้แง่มุมโวหารของเนื้อหาขององค์ประกอบ หรือสร้างส่วนประกอบเสมือนเพื่อปรับปรุงการนำเสนอด้วยภาพและประสบการณ์ผู้ใช้

ตัวเลือก

|

ตัวเลือกแบบซับซ้อนหรือแบบผสมอาจมีรายการส่วนประกอบที่คั่นด้วยเครื่องหมายจุลภาค และสามารถแทรกค่าจุดลอยตัวภายในที่ใดก็ได้ภายในรายการนี้

|

ข้อความที่ให้ไว้มีดังต่อไปนี้ในลักษณะที่หรูหรา:องค์ประกอบสุดท้ายของตัวเลือกจะต้องทำหน้าที่เป็นส่วนประกอบสุดท้ายในขณะที่ปรากฏเพียงครั้งเดียว

การแทรกเนื้อหา

|

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

|

คุณมีความสามารถในการรวมเนื้อหาเพิ่มเติมภายในหรือผนวกเข้ากับเนื้อหาขององค์ประกอบที่ระบุ

การจัดรูปแบบตัวอักษร

|

โดยทั่วไปจะไม่ใช้สำหรับการจัดรูปแบบการพิมพ์

|

ใช้เพื่อถ่ายทอดความแตกต่างของข้อความและการพิมพ์ เช่น::รูปแบบบรรทัดแรกและ::อักษรตัวแรก

ชิ้นส่วนเป้าหมาย

|

กำหนดเป้าหมายองค์ประกอบทั้งหมด

|

กำหนดเป้าหมายเฉพาะส่วนของเนื้อหาขององค์ประกอบ

รองรับเบราว์เซอร์

|

โดยทั่วไปได้รับการสนับสนุนอย่างดี

|

ความเข้ากันได้ของเบราว์เซอร์ของเว็บไซต์นี้โดยทั่วไปมีความแข็งแกร่ง แม้ว่าเบราว์เซอร์ที่ล้าสมัยบางตัวอาจมีฟังก์ชันการทำงานที่จำกัด

คลาสหลอกและองค์ประกอบหลอกมีบทบาทสำคัญในการมอบคุณสมบัติโวหารที่หลากหลายและฟังก์ชันเชิงโต้ตอบให้กับเว็บไซต์ผ่าน CSS แม้ว่าจะมีความคล้ายคลึงกันบางประการ แต่ก็มีฟังก์ชันที่โดดเด่นในด้านการออกแบบและพัฒนาเว็บไซต์

คลาสหลอกและองค์ประกอบหลอกในการดำเนินการ

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