[TIL] 가상 클래스 선택자/ 가상 요소 선택자

라형선·2023년 5월 2일

:first-child

:first-child, :last-child, :nth-child(n)은 모두 부모 요소의 자식 요소 중에서 특정 조건에 맞는 요소를 선택할 때 사용하는 가상 클래스입니다. 이 때 조건은 각각 다음과 같습니다.

html
Copy code
<div>
  <p>첫 번째 자식</p>
  <p>두 번째 자식</p>
  <p>세 번째 자식</p>
</div>

이 때, div 요소의 첫 번째 자식 요소인 p 요소를 선택하려면 다음과 같은 CSS 코드를 작성할 수 있습니다.

css
Copy code
div :first-child {
  /* 스타일 지정 */
}

그리고 :first-of-type, :last-of-type, :nth-of-type(n)은 모두 같은 자식 요소 타입 중에서 특정 조건에 맞는 요소를 선택할 때 사용하는 가상 클래스입니다. 이 때 조건은 각각 다음과 같습니다.

html
Copy code
<div>
  <p>첫 번째 자식</p>
  <span>두 번째 자식</span>
  <p>세 번째 자식</p>
  <p>네 번째 자식</p>
  <span>다섯 번째 자식</span>
</div>

이 때, div 요소의 첫 번째 p 요소를 선택하려면 다음과 같은 CSS 코드를 작성할 수 있습니다.

css
Copy code
div p:first-of-type {
  /* 스타일 지정 */
}

참고로, :first-of-type와 :nth-of-type(n)을 같이 사용할 경우 :first-of-type은 해당 요소 타입 중에서 첫 번째 요소를 선택하고, 그 중에서 :nth-of-type(n)의 조건에 맞는 요소를 선택합니다.

버튼 등을 클릭해서 요소의 동작이 활성화되어있는 상태

활성화된 요소를 선택하는 가상 클래스 선택자

focus를 받고 있는 입력 창 등의 요소를 선택하는 가상 클래스 선택자

실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.

:before
:after
기능상 동일하다.
ex)캐러셀 버튼

.box1:after {
	content: "나는 가상 요소입니다.";
    display: block;
    background: blue;
}

가상요소 사용시에는 content를 필수적으로 사용해야 한다.

clearfix의 경우 아래와 같이 변경 해 줄 수 있다.

<div class = "clearfix"></div>

.clearfix{
	clear: both;
}


<div class = "container clearfix">

.clearfix:after{
	content;"";
    display:block;
    clear:both;
}

A ~ B {
property: value
}

A의 선택자 자손선택자 안에 B태그들만 선택하겠다.

.text ~ span{
	background: red;
}

CSS Diner게임

형선