CSS. 가상 클래스

가상 클래스

: 코드에는 실제로 존재하지 않지만 임의로 가상의 선택자를 지정하여 사용하는 것

1. 링크와 관련된 가상 클래스 선택자

(1) :link

• : 아직 방문하지 않은 링크에 적용

a:link{color: black: text-decoration:}  // a 중 텍스트 링크를 밑줄 없이 검은색으로 결정

(2) :visited

• : 한 번 이상 방문한 링크에 적용
• 페이지의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용
• 방문한 페이지는 기본적으로 자주생으로 표시

a:visited {color:black;} // :방문했던 링크를 검은색으로 표시

(3) :active

• : 활성화되었을 때의 스타일
• 해당 요소가 활성화되었을 때 스타일을 지정, 만약 링크라면 링크를 클릭했을 때 스타일

a:active{color:black;} // 클릭하는 순간 검은색이 되도록 설정

(4) :hover

• :마우스 포인터를 올려놓았을 떄의 스타일
• 해당 요소 위로 마우스 포인터를 올려놓았을 떄의 스타일을 지정, 롤오버를 만드는 선택자

a:hover{color:red; text-decoration:underline;} // 링크 위로 마우스 포인터를 올려놓으면 밑줄과 함께 글자색을 빨간색이 되도록 설정

(5) :focus

• : 초점이 맞춰졌을 때의 스타일
• 커서를 갖다 놓는다거나 Tab을 눌러 초점을 이동했을 때의 스타일

p:focus{background-color:yellow;} // p의 텍스트 단락 위로 커서를 올려놓거나 키보드의 Tab을 눌러 텍스트 단락까지 왔을 때(초점이 맞춰졌을 때) 텍스트 단락의 배경색을 노란색으로 보이도록 설정

2. 요소 상태 셀렉터(element states pseudo-classes)

• :checked{}: 셀렉터가 체크 상태일 때

• :enabled{} : 셀렉터가 사용 가능한 상태일 때

• :disabled{} : 셀렉터가 사용 불가능한 상태일 때

3. 구조 가상 클랙스 셀렉터(Structural pseudo-classes)

• :first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.

• :last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.

• :nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.

• :nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한
  다.

• :first-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.

• :last-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.

• :nth-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.

• :nth-last-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.

4.부정 셀렉터 (Negation pseudo-class)

• :not(selector) : 셀렉터에 해당하지 않는 모든 요소를 선택

5.정합성 체크 셀렉터 (Validity pseudo -class)

• :valid(selector) : 정합성 검증이 성공한 input요소 또는 form요소를 선택
• :invalid(selector) : 정합성 검증이 실패한 input 요소 또는 form 요소를 선택

참고/https://seo-ox3.tistory.com/26