p + span: p 다음으로 오는 형제인 span에만 적용 된다. p 와 span 사이에 address를 추가하면, span에 적용되지 않는다. p 바로 다음에 span이 오지 않기 때문이다.
span이 p의 형제인데 바로 뒤에 오지 않을 때 쓸 수 있는 기호가 ~ 이다.
p span: father-children
p + span: 형제와 바로 뒤에 오는 형제관계
p > span: 부모와 바로 밑 자식 direct children 관계
p ~ span: 형제와 형제 관계
optional, required. class 추가 없이 form에서 required 필드를 보여줄 때 사용.
attribute selector: attribute를 통해 어떤 것이든 선택할 수 있게 해준다.
⬆️ input[type="password"] { }
⬆️ input[placeholder="username"] { }
⬆️ input[placeholder~="username"] { }
placeholder에 name이라는 단어가 포함한 모든 input이 배경색으로 pink를 가지도록 만드는 법. placeholder에 name을 포함한 모든 input을 지정하면 된다.
(댓글)
*= is 'contains'
~ = is 'exactly'
*= "hello" 라고 하면 ㅁㄴㅇㄹㄴㅇㄹhelloㅁㄴㅇㄹㄴㅇㄹ 라고 줘도 선택되고요.
~= "hello" 라고 하면 앞뒤에 공백이 있는 상태에서 hello 인 경우만 선택되요.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors