atrribute selector, pesudo selector

atrribute 선택자[ ]

input[placeholder="name"]{}

 

~= :포함하는
^= :로 시작하는
$= : 로 끝나는

input[palceholder~="name"]  //name포함하는 모든 palceholder
a[href $=".org"] // .org로 끝나는 모든 링크

---

pesudo selector

+ 바로다음에오는 형제요소

~ 형제요소(바로 다음에 오지 않아도되는)

 

---

focus-within 

포커스를 받았거나, 그 자손 중 하나가 :focus 받을 때  

 

.reply:focus-within input{} //클래스 reply 나 자손이 focus 받을 때 인풋이

 

흔히 쓸 수 있는 예시로서, <form>의 <input> 필드 중 하나가 포커스된 경우 전체 <form>을 강조해야 할 때 유용하게 사용할 수 있습니다.