[CSS] combinator, selector

Remember that you dont have to memorize all these things right now. You will learn by repetition in practicing.

 

Combinator

1) div span
: div 속 span을 의미. span이 div의 direct children이 아니어도 작동

2) div > span
: span이 div의 direct children임을 의미. 이땐 direct children이 아니면 작동하지 않습니다.

3) div + span
: div와 동등한 위치에 있는 span을 의미.

div ~ span과는 달리 바로 옆에 위치해야함.

 

4) div ~ span 

: div라는 부모를 공유하는 모든 span 선택

 

Selector

Attribute selector

ex) input[placeholder=""]

*= is 'contains'
~= is 'exactly'

후자는 공백을 두고 정확한 그 단어만 셀렉트.

-

1) :: placeholder 
: placeholder의 특성만 바꾸고 싶을 때 사용
2) :: selection 
: 드래그했을 때(긁을때) 발생
3) :: first-letter
4) ::first-line 

* 콜론이 두 개!

*복습 내용
1) active
: 클릭

2) hover
: 마우스 커서를 올려놓으면

3) focus
: element가 focused된 상태. 키보드 탭 버튼

4) visited
: 방문한 사이트

5) focus-within
: focus되는 children이 있으면 작동. 

* form: hover input: focus{} 의 경우엔 두 조건 모두 만족해야 {} 안이 실행