CSS 의사 클래스(:link,:hover,:checked,:first-child)

의사 클래스

; 선택하고자 하는 HTML요소의 특별한 상태 명시할 때 사용

 

동적 의사 클래스

:link ; 한 번도 방문 하지 않은 상태

:hover ; 마우스 올려놓은 상태

:active ; 마우스로 링크 클릭하고 있는 상태

:visited ; 한 번 이상 방문한 상태

:focus ; 초점이 맞춰진 input 요소를 모두 선택, input, a, button, label, select에 가능. tabindex="-1"를 통해 탭으로 선택할 수 있게 만들 수 있음

 

 

상태 의사 클래스

- :checked ; 체크된(checked) 상태의 input 요소를 모두 선택함

- :enabled ; 사용할 수 있는 input 요소를 모두 선택함

- :disalbed ; 사용할 수 없는 input 요소를 모두 선택함

 

 

구조 의사 클래스

:first-child ; 모든 자식 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택

ex) .fruits span:first-child ; .fruits의 하위요소인 span 태그를 찾는데, 그 형제 요소들 중에서 첫번째 자식

:last-child ; 모든 자식 요소 중에서 맨 뒤에 위치하는 자식 요소를 모두 선택

:nth-child(n) ; 모든 자식 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 모두 선택

ex) :nth-child(2n) ; 짝수 번째 자식 요소 선택 / :nth-child(2) ; 2번째 요소 선택

ex) :nth-child(2n+1) ; 홀수 번째 자식 요소 선택 / :nth-child(n+2) ; 2번째부터 시작해 2,3,4,...요소 선택

ABC:not(XYZ) ; ABC의 자식요소들 중에서 span이 아닌 요소

:first-of-type ; 모든 자식 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택
:nth-of-type ; 모든 자식 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택

 

 

기타 의사 클래스

- 

ex) input:not([type="password"]) ; type="password"가 아닌 input요소 선택
- :lang ; 특정 언어 선택

ex) :lang(en){~} ; 영어만 선택

 

 

의사 요소

; 해당 HTML 요소의 특정 부분만 선택

::first-letter ; 텍스트의 첫 글자만 선택

ex) p::first-letter{font-size:2em;} ; 첫 글자만 크기 2배

::first-line ; 텍스트의 첫 라인만, 블록(block) 타입의 요소에만 사용 가능
::before ; 특정 요소의 내용 부분 바로 앞에 다른 요소를 삽입할 때 사용.  content:"내용"로 삽입

ex) p::before{content: url("image/image1") ; p나오기 전에 그림 하나 나옴
::after ; 특정 요소의 내용 부분 바로 뒤에 다른 요소를 삽입할 때 사용
::selection ; 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용

ex) p::selection{color:red} ; 사용자가 p의 내용을 드레그하면 색이 변함

 

+ 속성 선택자 ; 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소 선택

ex) [titile]                ex)[title~="first]

 

transition : 1s ; 1초의 시간을 가지고 변화