พีอัดโดคลาส focus-within

พีอัดโดคลาส focus-within กำหนดสไตล์ ให้กับอิลิเมนต์ที่มีโฟกัสอยู่ภายใน ต่างจากพีอัดโดคลาส focus ที่กำหนด สไตล์ให้กับตัวอิลิเมนต์นั้นๆ โดยตรง ส่วน focus-within กำหนดสไตล์ให้กับอิลิเมนต์แม่

ไวยากรณ์

cssselector:focus-within {

}

ตัวอย่าง

มากำหนดสีพื้นหลังสีฟ้าอ่อนให้กับอิลิเมนต์แม่ เมื่ออิลิเมนต์ลูกซึ่งเป็นอินพุตอยู่ในสถานะโฟกัส:

html<div>
  กรุณากรอกชื่อของคุณ: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

ดูเพิ่มเติม

พีอัดโดคลาส :indeterminate,
ซึ่งกำหนดสไตล์ให้กับสวิตช์ที่อยู่ในสถานะไม่แน่นอน
พีอัดโดคลาส :default,
ซึ่งกำหนดสไตล์ให้กับอิลิเมนต์ตามค่าเริ่มต้น
พีอัดโดคลาส :fullscreen,
ซึ่งกำหนดสไตล์ให้กับอิลิเมนต์ในโหมดเต็มหน้าจอ
พีอัดโดคลาส :placeholder-shown,
ซึ่งกำหนดสไตล์ให้กับอิลิเมนต์เมื่อแสดงข้อความคำใบ้
คุณสมบัติ caret-color,
ซึ่งกำหนดสีให้กับเคอร์เซอร์ข้อความในอินพุต