องค์ประกอบจำลอง

พอดแคสต์ CSS - 014: Pseudo-elements

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

ใน CSS คุณใช้องค์ประกอบเทียม ::first-letter เพื่อให้ได้รายละเอียดการออกแบบประเภทนี้ได้

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

องค์ประกอบเทียมก็เหมือนกับการเพิ่มหรือกำหนดเป้าหมายองค์ประกอบเพิ่มเติมโดยไม่ต้องเพิ่ม HTML อีก โซลูชันตัวอย่างนี้ซึ่งใช้ ::first-letter เป็นหนึ่งในองค์ประกอบจำลองจำนวนมาก องค์ประกอบเหล่านี้มีบทบาทที่หลากหลาย และในบทเรียนนี้ คุณจะได้เรียนรู้ว่าองค์ประกอบเทียมที่พร้อมใช้งานและคุณจะใช้องค์ประกอบเหล่านั้นอย่างไร

::beforeและ::after

ทั้งองค์ประกอบจำลอง ::before และ ::after จะสร้างองค์ประกอบย่อยภายในองค์ประกอบเฉพาะหากคุณกำหนดพร็อพเพอร์ตี้ content

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

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

เมื่อสร้างองค์ประกอบ ::before หรือ ::after แล้ว คุณจะจัดรูปแบบได้ตามต้องการโดยไม่มีขีดจำกัด คุณสามารถแทรกองค์ประกอบ ::before หรือ ::after ลงในองค์ประกอบที่จะยอมรับองค์ประกอบย่อยเท่านั้น (องค์ประกอบที่มีแผนผังเอกสาร) ดังนั้นองค์ประกอบอย่าง <img />, <video> และ <input> จะไม่ทำงาน

::first-letter

เราเจอองค์ประกอบเทียมนี้เมื่อเริ่มต้นบทเรียน โปรดทราบว่าพร็อพเพอร์ตี้ CSS บางรายการอาจใช้เมื่อกำหนดเป้าหมาย ::first-letter ไม่ได้ พร็อพเพอร์ตี้ที่ใช้ได้มีดังนี้

• color
• พร็อพเพอร์ตี้ background (เช่น background-image)
• พร็อพเพอร์ตี้ border (เช่น border-color)
• float
• พร็อพเพอร์ตี้ font (เช่น font-size และ font-weight)
• พร็อพเพอร์ตี้ข้อความ (เช่น text-decoration และ word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

องค์ประกอบเทียม ::first-line จะช่วยให้คุณจัดรูปแบบบรรทัดแรกของข้อความได้เฉพาะในกรณีที่องค์ประกอบที่ใช้ ::first-line มีค่า display เป็น block, inline-block, list-item, table-caption หรือ table-cell

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

มีเพียงชุดย่อยของพร็อพเพอร์ตี้ CSS ที่คุณใช้ได้ เช่นเดียวกับองค์ประกอบเทียม ::first-letter

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

::backdrop

หากมีองค์ประกอบที่แสดงในโหมดเต็มหน้าจอ เช่น <dialog> หรือ <video> คุณสามารถจัดรูปแบบฉากหลัง (ช่องว่างระหว่างองค์ประกอบกับส่วนที่เหลือของหน้า) ด้วยองค์ประกอบ Pseudo-::backdrop ต่อไปนี้

video::backdrop {
  background-color: goldenrod;
}

::marker

องค์ประกอบจำลอง ::marker ให้คุณจัดรูปแบบหัวข้อย่อยหรือตัวเลขสำหรับรายการ หรือลูกศรขององค์ประกอบ <summary> ได้

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

รองรับคุณสมบัติ CSS ส่วนน้อยสำหรับ ::marker:

• color
• content
• white-space
• ที่พัก font แห่ง
• animation และพร็อพเพอร์ตี้ transition

คุณสามารถเปลี่ยนสัญลักษณ์เครื่องหมายได้โดยใช้คุณสมบัติ content เช่น คุณสามารถใช้ค่านี้เพื่อตั้งค่าเครื่องหมายบวกและลบสำหรับสถานะปิดและว่างเปล่าขององค์ประกอบ <summary>

::selection

องค์ประกอบเทียม ::selection ให้คุณจัดรูปแบบข้อความที่เลือกได้

::selection {
  background: green;
  color: white;
}

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

เฉพาะบางส่วนของพร็อพเพอร์ตี้ CSS เท่านั้นที่ได้รับอนุญาต เช่นเดียวกับองค์ประกอบเทียมอื่นๆ

• color
• background-color แต่ไม่ใช่ background-image
• ที่พัก text แห่ง

::placeholder

คุณเพิ่มคำแนะนำตัวช่วยลงในองค์ประกอบแบบฟอร์มได้ เช่น <input> ด้วยแอตทริบิวต์ placeholder องค์ประกอบเทียม ::placeholder ให้คุณจัดรูปแบบข้อความนั้นได้

input::placeholder {
  color: darkcyan;
}

::placeholder รองรับเฉพาะกฎ CSS ชุดย่อยดังนี้

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

::cue

สุดท้ายในทัวร์ชมองค์ประกอบจำลองนี้คือองค์ประกอบเทียม ::cue การดำเนินการนี้จะช่วยให้คุณจัดรูปแบบคิว WebVTT ซึ่งเป็นคำบรรยายขององค์ประกอบ <video> ได้

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

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

ทดสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบเทียม