บางครั้งเมื่อเราสร้าง CSS เราต้องการกำหนดเป้าหมายองค์ประกอบบางอย่าง สมมติว่าเรามีเอกสาร HTML ที่เต็มไปด้วย <div> แท็กและ <span> แท็ก แต่ต้องการกำหนดเป้าหมายเฉพาะประเภทแรกของแต่ละประเภทเพื่อจัดรูปแบบบางอย่าง เราสามารถทำได้ด้วยสิ่งที่เรียกว่า :first-of-type pseudo-class
pseudo-class เป็นวิธีที่ตัวเลือก CSS จะมีสไตล์เฉพาะที่แตกต่างจากสไตล์ดั้งเดิมที่ให้ไว้ ขึ้นอยู่กับสถานะขององค์ประกอบ ในกรณีนี้ เราต้องการเลือก <div> ตัวแรก และตัวแรก <span> เพื่อให้เราสามารถจัดรูปแบบได้ - จะไม่มีการเลือกช่วงหรือ div อื่น
นี่คือตัวอย่างที่จะช่วยให้คุณเริ่มต้น:
<html>
<head>
<style>
body {
display: flex;
flex-flow: row wrap;
}
div {
height: 100px;
width: 200px;
border: 1px solid black;
margin: 20px;
padding: 20px;
}
/* First of type */
div:first-of-type {
background: purple;
color: white;
}
div span:first-of-type {
color: red;
text-decoration: underline;
background: lightblue;
}
</style>
</head>
<body>
<div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div>
<div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div>
</body>
</html>
เรามีชุดของ div และ span ภายใน div เหล่านั้น ตัวเลือก CSS div:first-of-type เลือกเฉพาะองค์ประกอบแรกของประเภทและกำหนดรูปแบบเท่านั้น div span:first-of-type เลือกช่วงแรกในแต่ละ div เนื่องจาก div เป็นองค์ประกอบหลัก
div:first-of-type จะเหมือนกับว่า div:nth-child(1)
บทสรุป
ในบทความนี้ เรามาดู pseudo-class :first-of-type เราเห็นว่าคลาสหลอกเป็นเพียงสิ่งที่อธิบายสถานะที่เราต้องการให้ตัวเลือก CSS อยู่ในเมื่อเราจัดรูปแบบ เรายังดูที่ไวยากรณ์ทั่วไป ฉันขอแนะนำให้ดูที่ตัวเลือกหลอกอื่นๆ และทำความเข้าใจกับตัวเลือกเหล่านั้นด้วย!
