1. 가상 클래스 선택자

• Pseudo Selectors

📌 :first-child

• 자식 요소 중 첫번째 자식 요소를 선택한다.

📌 :last-child

• 자식 요소 중 마지막 자식 요소를 선택한다.

  ⚠️ body의 직계 자손의 경우, :first-child 선택자가 적용되지만, :last-child는 적용되지 않는다.

📌 :nth-child(n)

• 자식 요소 중 n번째 자식 요소를 선택한다.

li:nth-child(even) {
    color: pink;
}
li:nth-child(2n+1) {
    color: pink;
}

📌 :nth-of-type

• 특정 자식 요소 중 n번째를 선택한다.

    <div class="container">
      <h1>Hello world</h1>
      <span>Hello world</span>
      <p>Hello world</p>
      <span>HTML</span>
      <p>CSS</p>
    </div>
    
    <style>
      span:nth-of-type(2) {
        color: pink;
      }
    </style>

⚠️ nth-child 와 nth-of-type 다른점? ? ?
nth-child는 부모의 모든 자식 요소 중 n번째를 나타나는 반면 nth-of-type은 부모의 특정 자식 요소 중 n번째를 말한다.

📌 :only-of-type

• 자식 요소 중 같은 유형의 자식이 없을 때, 선택한다.

    <div class="container">
      <h1>HTML</h1>
      <h2>CSS</h2>
      <h3>JavaScript</h3>
    </div>
    
    
    <style>
      h2:only-of-type {
        color: pink;
      }
   </style>

📌 :not

• 특정 요소를 제외시킬 때, 사용한다.

    <div class="container">
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
    </div>
    
    <style>
      p:not(:first-child) {
        color: pink;
      }
    </style>

📌 :root

• 웹 문서에서 가장 상위 요소를 선택할 때, 사용한다.
• 보통 html에서 root는 html을 말하지만 스타일을 적용할 때 :root 가상 클래스의 우선 순위가 더 높다.
• :root를 이용하여 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용하여 조작하는 데 용이하다.

:root 변수 선언

     :root {
        --color-yellow: rgb(255, 255, 189);
        --font-size: 12px;
        --box-shadow: 1px 1px 1px #ddd;
      }

• 웹 문서에서 공통적으로 사용될 속성을 :root 변수에 선언한다.

  -- (하이픈 2개) 속성이름 : 속성값 ;

:root 변수 사용

     .container {
        background-color: var(--color-yellow);
        box-shadow: var(--box-shadow);
      }

     span {
        font-size: var(--font-size);
      }

• 변수를 var로 선언하고 소괄호 안에 속성 값을 넣는다.

2. 가상 요소 (::)

• 선택자에 추가하는 키워드
• 선택한 요소에 특정한 스타일을 적용할 수 있다.
• 존재하지 않는 요소를 존재하는 것처럼 부여하여 스타일을 적용한다.

선택자::가상요소 {속성: 속성값};

📌 ::before

• 선택한 요소 바로 앞에 생성되는 자식 요소

📌 ::after

• 선택한 요소 바로 뒤에 생성되는 자식 요소

Content

• ::before, ::after와 같이 쓰이는 속성
• HTML 문서에 포함되지 않은 요소를 CSS에서 새롭게 생성시켜 장식용 콘텐츠를 추가할 때 사용한다.
• 빈태그 img, br, input에는 적용할 수 없다.

      <ul>
        <li>첫번째</li>
        <li>두번째</li>
        <li>세번째</li>
      </ul>
      
      <style>
      li::before {
        content: "#";
      }

      li::after {
        content: "!";
      }
    </style>

📌 ::placeholder

• input 요소나 textarea 요소의 placeholder의 가상 선택자로 선택하여 스타일을 적용할 수 있다.

<input type="text" placeholder="텍스트를 입력해주세요" />

<style>
   input::placeholder {
     color: pink;
   }
</style>

3. 동적 가상 선택자 (:)

📌 :active

• 클릭하면 활성화

  여기서 "활성"은 마우스 버튼을 누르는 순간부터 떼는 시점까지!

📌 :visited

• 방문 후의 링크 상태
• 웹브라우저의 방문기록 정보를 사용

📌 :disabled

• 비활성화된 상태

📌 :hover

• 커서를 요소에 올려두었을 때

📌 :focus

• focus 받은 상태

a, button, input가 포커스의 요소들이다.
이는 모두 클릭, 입력 등 사용자와 상호작용이 있는 요소들

📌 :checked

• input의 checkbox나 radio가 선택된 상태

Reference

:root 가상 클래스로 CSS 변수 다루기