พอดแคสต์ 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;
}
ทดสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับองค์ประกอบเทียม
ข้อใดต่อไปนี้ไม่ใช่องค์ประกอบเทียม
::before
content: '';
::first-paragraph
::after
content: '';
::marker
::pencil
:active
พบองค์ประกอบที่ไม่เทียมได้ในไฟล์ HTML