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

쵸리·2021년 10월 4일

목록 보기

6/11

의사 클래스 ( 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: '';
}