[HTML, CSS] - CSS 의사 요소 & 클래스

 

---

---

 

의사 요소

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

하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용 가능

선택자::의사요소이름 {속성: 속성값;}

 

::first-letter

텍스트의 첫 글자만을 선택

블록(block) 타입의 요소에만 사용

 

• font 속성
• color 속성
• background 속성
• margin 속성
• padding 속성
• border 속성
• text-decoration 속성
• text-transform 속성
• line-height 속성
• float 속성
• clear 속성
• vertical-align 속성 (단, float 속성값이 none일 경우에만)

 

::before

특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입

 

::after

특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입

 

::selection

해당 요소에서 사용자가 선택한 부분만을 선택

 

 

---

 

클래스

 

의사 클래스

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시

의사 클래스의 이름은 대소문자를 구분하지 않음

선택자:의사클래스이름 {속성: 속성값;}
선택자.클래스이름:의사클래스이름 {속성: 속성값;} 
선택자#아이디이름:의사클래스이름 {속성: 속성값;}

 

 

동적 의사 클래스(dynamic pseudo-classes)

• :link
  • 링크의 기본 상태, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않음.
• :visited 
  • 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문
• :hover
  • 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
  • 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작
• :active
  • 사용자가 마우스로 링크를 클릭하고 있는 상태
  • 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작
• :focus
  • 키보드나 마우스의 이벤트(event) 또는 다른 형태, 해당 요소가 포커스(focus)를 가지고 있는 상태

 

 

상태 의사 클래스(UI element states pseudo-classes)

• :checked
  • input 요소 중에서 체크된 상태의 input 요소를 선택

• :enabled
  • input 요소 중에서 사용할 수 있는 input 요소를 선택:
• :disabled
  •  input 요소 중에서 사용할 수 없는 input 요소를 선택

 

 

구조 의사 클래스(structural pseudo-classes)

• :last-child
  • 모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택

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

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

• :first-of-type
  • 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택

• :last-of-type
  • 모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택

• :nth-of-type
  • 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택

• :nth-last-of-type
  • 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택

• :only-child
  • only-child는 자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선택

• :only-of-type
  • 자식(child)  요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택

• :empty
  • 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택

• :root
  • 해당 문서의 root 요소를 선택

•  

 

기타 의사 클래스

• :not
  •  모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용하여 선택

• :lang
  •  특정 HTML 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용

 

 

---