states에 관한 내용

  input:optional  

속성이 설정되지 않은 모든 요소에 적용한다.

 

  input:지정  

지정한 인풋을 설정할 수 있다.

type이든, type안의 text든, placeholder의 username이든 무엇이든 가능하다.

 

😃 states의 "~"에 대하여

만약 placeholder~=”name”으로 설정되면

Name를 “포함한” placeholder은 다 적용된다.

 

"~"는 포함한 모든 것을 적용시킨다.

 

"$"는 작성한 것에서 끝에 오는 경우이다.

 

"^"는 작성한 것에서 처음에 오는 경우이다.

 

 

😃 states 기능 몇가지들

  element:active  

요소를 누를 때 작용.

 

  element:hover  

요소를 가져다 댈 때 작용.

 

  element:focus  

요소가 선택되었을 때 작용 (키보드로도 가능).

 

  a:visited   

a(링크)가 클릭 됐을 때 작용.

 

  element:focus-within  

요소안에 어떤 자식이든 focus가 되면 요소에 적용

 

  element:hover child  

요소를 가져다 대면 자식이 적용

 

 

😃 Focus에 대하여

 

 

Focus-within은 부모안에 어떤 자식이든 focus가 되면 부모 엘리먼트에 적용된다.

form 안에 있는 input이 focus되면 form이 작동된다.

 

 

Form이 hover(가져다 댈 때 적용)되면 그안에 input이 적용된다.

 

 

 

😃 Pseudo element의 “::”와 3가지

 

 

input::placeholder

 “::” placeholder 꾸미기 옵션

 

p::selection

“선택 시” 옵션

 

p::first-letter

첫 글자 옵션

 

p::first-line

첫번째 줄 옵션