반응형
[광고 누르면 오늘의 행운 상승!!]
- 의사 클래스 : 가짜 또는 모조 클래스. 클래스의 특징을 가짐
- 형식 : :(콜론) 의사 클래스 명
선택자 뒤에 붙어 선택자의 상태를 기준으로 선택
:link 의사 클래스 : 한번도 클릭하지 않은 링크 - 히스토리에 없는 링크 상태 의미
예) a: link{...} : 한번도 방문하지 않는 링크 선택
링크의사 클래스 (:link, : visited)
- link 의사 클래스 : 한번도 방문하지 않은 링크
- 링크 의사 클래스 : 링크의 상태 선택자로 이용
- :visited 의사 클래스 : 방문한 링크에 CSS스타일 적용 시 사용
HTML 코드
<a href="#">링크</a>
CSS 코드
a:link { color : brown; text-decoration: none;}
a:visited { color : lightgray; text-decoration: none;}동적 의사 클래스
- 동적 의사 클래스 : 마우스와 커서에 관한 생태를 의사 클래스로 나타냄
- :active의사 클래스 : 마우스로 클릭했을 떄의 상태의미
- :hover 의사 클래스 : 마우스 커서가 올라간 상태 의미
- 링크 뿐만 아니라 대부분의 요소에 적용 가능
- HTML과 CSS 만으로 상당히 동적인 페이지 제작 가능
- :focus 의사 클래스 : 서식 폼과 같은 요소에 마우스 위치하여 입력 또는 선택 상황 의미
요소가 포커스를 가진다
구조적 의사 클래스
- 구조적 의사 클래스
- HTML 구조에 따른 의사 클래스
- 형제와 자손 그리고 몇 번째 요소인지로 상태 구분
- CSS3에서 추가된 내용 - :root 의사 클래스 : 문서의 최상위 요소 의미(단독으로 사용)
:root { background-color:gray;}- :empty 의사 클래스 : 비어있는 요소 의미
- HTML 구조에 따른 의사 클래스
- 형제와 자손 그리고 몇번째 요소인지로 상태 구분
- :only-child 의사 클래스 : 형제가 없는 요소 - 자신이 속한 부모 요소의 유일한 자손 요소
- :only-of-type 의사 클래스 : 같은 타입의 형제가 없을 때 사용
p:only-of-type{
width: 200px;
background-color: gray;
}- :first-child, :last-child 의사 클래스
- nth-of-type(n), :nth-last-of-type(n) 의사 클래스
- :first-of-type, :last-of-type 의사 클래스
기타 의사 클래스
- :lang() 의사 클래스 : 지정한 언어 속성을 가지는 요소
예) HTML 문서 전체가 한국어
<html lang ="ko> - 하나의 HTML 문서에 다양한 국가의 언어 사용할 경우 해당 언어가 사용된 요소 적용
- :not() 의사 클래스 : 부정을 의미
- () 안에 선택에서 제외될 선택자 삽입
- ()안에 다양한 선택자 지정 가능
반응형
'5. 웹 프로그래밍 > 2. CSS' 카테고리의 다른 글
| 미디어 쿼리[CSS] (0) | 2020.03.10 |
|---|---|
| 의사 엘리먼트[CSS] (0) | 2020.03.10 |
| 하위 선택자[CSS] (0) | 2020.03.10 |
| 타입 선택자[CSS] (0) | 2020.03.10 |
| 외부 CSS 파일 HTML 문서에 연결[CSS] (0) | 2020.03.10 |