CSS 의사 클래스 ( 가상 클래스 )와 의사 요소 ( 가상 요소 )

의사 클래스 ( pseudo-class )

CSS에서 의사 클래스는 선택하고자 하는 HTML 요소, 아이디, 클래스 선택자에게 특별한 상태를 명시할 때 사용한다.

의사 클래스 사용 방법

<h1>안녕하세요</h1>

h1:hover {
	color: blue;
}

요소:의사클래스이름 {
속성: 속성값;
}

대표적인 CSS 의사 클래스

1. 동적 의사 클래스

• :link : 사용자가 아직 한 번도 해당 링크를 누르지 않은 상태 ( a요소 기본 )
• :visited : 사용자가 한 번이라도 해당 링크를 누른 상태
• :hover : 사용자의 마우스 커서가 위에 올라가 있는 상태
• :active : 사용자의 마우스 커서가 클릭중인 상태
• :focus : tab키로 focus가 맞춰진 상태

2. 상태 의사 클래스

• :checked : input의 checkbox나 raidobutton이 체크된 상태
• :enabled : input의 "type=text", select, option에서 사용자가 선택한 상태
• :disabled : input의 "type=text", select, option을 사용자가 선택할 수 없도록 만든 상태
  
  출처 - https://aboooks.tistory.com/311

3. 구조 의사 클래스

• :first-child : 모든 자식 요소 중에서 첫 번째에 위치하는 자식을 선택
• :nth-child(n) : 모든 자식 요소 중에서 n번째에 위치하는 자식을 선택
• :last-child : 모든 자식 요소 중에서 마지막에 위치하는 자식을 선택
• :first-of-type : 모든 자식 요소 중에서 첫 번째에 등장하는 특정 요소를 선택
• :nth-of-type(n) : 모든 자식 요소 중에서 n번째로 등장하는 특정 요소를 선택
• :last-of-type : 모든 자식 요소 중에서 마지막으로 등장하는 특정 요소를 선택

※ :first-child와 :first-of-type의 차이점

<div class="parent">
  <div>text1</div>
  <p>text2</p>
  <p>text2</p>
</div>

.parent p:first-child {
  color: #ff0000;
}

.parent p:first-of-type {
  color: #ff0000;
}

부모 ＜div＞가 있고 그 아래 자식들이 첫 번째 ＜div＞ 두 번째, 세 번째에 ＜p＞가 있는 경우 :first-child의 경우에는 p에 color가 적용되지 않는다. 이유는 ＜p＞는
부모＜div＞의 두 번째 자식이기 때문이다. 반면에 :first-of-type은 부모 ＜div＞의 두 번째 자식이여도 ＜p＞끼리는 처음에 등장한다 그래서 적용이 된다. 만약 전부 ＜p＞로 통일되어 있으면 두 개의 차이점은 없다.

출처 - https://webclub.tistory.com/254

의사 요소 ( 가상 클래스 )

의사 요소는 해당 HTML 요소의 특정 부분에 스타일을 지정하는 데 사용한다.

대표적인 CSS 의사 요소

• ::first-letter : 요소의 텍스트에서 첫 번째 글자에 스타일을 적용한다.
  블록타입의 요소에만 사용 가능하다.
• ::first-line : 요소의 텍스트에서 첫 줄에 스타일을 적용한다.
  블록타입의 요소에만 사용 가능하다.
• ::before : 요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가한다.
• ::after : 요소의 콘텐츠 끝부분에 생성된 콘텐츠를 추가한다.

::before, ::after 사용법

<ul>
    <li>login</li>
    <li>home</li>
    <li>sitemap</li>
</ul>

li {
  float: left;
  margin-right: 30px;
  font-size: 32px;
}

li::after {
  content: '|';
  padding-left: 20px;
}

li:last-of-type::after{
  content: '';
}

기본적으로 ::before, ::after을 사용할땐 'content' 속성이 꼭 필요하다.
'content' 란 HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 '가짜' 속성이다.

content 속성

normal - 아무것도 표시하지 않은 기본값
string - 문자열 생성
image - 이미지나 비디오를 불러올 수 있음 ( 크기 조절 불가능 )
none - 아무것도 표시하지 않는다.
attr - 해당속성의 속성값 표시

:과 ::의 차이는 단일콜론은 IE8에서만 지원한다.
또 스크린 리더기가 IE에서 빼고 전부 content의 내용을 읽는다.

출처 - http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/