#3.16 Pseudo Selectors part Two

오주형·2022년 7월 14일
0

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

profile
곧 개발자

0개의 댓글