Pseudo-classes and Pseudo-elements

CSS의 Pseudo-classes와 Pseudo-elements는 기본 선택자만으로는 다루기 어려운 요소의 특정 상태나 부분에 스타일을 적용할 수 있도록 한다. 

---

1. Pseudo-classes

Pseudo-class는 요소가 특정 상태에 있을 때를 선택하기 위해 사용된다. 일반적인 요소 선택자와 함께 사용되어 조건부 스타일링이 가능하다.

구문

selector:pseudo-class {
  property: value;
}

주요 Pseudo-classes

상호작용 상태

1. :hover : 사용자가 요소에 마우스를 올렸을 때

   button:hover {
     background-color: blue;
   }

2. :active : 요소가 활성 상태일 때(예: 버튼이 눌린 상태).

   button:active {
     background-color: red;
   }

3. :focus : 사용자가 요소를 포커스(클릭하거나 Tab으로 이동)했을 때.

   input:focus {
     outline: 2px solid green;
   }

4. :disabled, :enabled : 입력 요소가 비활성화되었거나 활성화되었을 때.

   input:disabled {
     background-color: gray;
   }

5. :checked : 체크박스나 라디오 버튼이 선택되었을 때.

   input:checked {
     border: 2px solid green;
   }

구조 선택

1. :nth-child(n) : 부모 요소의 n번째 자식

   li:nth-child(2) {
     color: red;
   }

2. :nth-of-type(n) : 같은 유형의 n번째 자식

   p:nth-of-type(1) {
     font-weight: bold;
   }

3. :first-child / :last-child : 부모의 첫 번째 또는 마지막 자식.

   li:first-child {
     font-size: 1.5em;
   }

4. :only-child : 부모 요소의 유일한 자식

   div:only-child {
     margin: 10px;
   }

   
   
   

부정 조건

1. :not(selector) : 특정 선택자를 제외한 모든 요소

p:not(.special) {
  color: gray;
}

 

기타

1. :empty : 자식 요소가 없는 요소를 선택.

   div:empty {
     display: none;
   }

2. :nth-last-child(n) : 부모의 마지막에서 n번째 자식을 선택.

   li:nth-last-child(1) {
     color: blue;
   }

---

2. Pseudo-elements

Pseudo-element는 HTML 요소의 특정 부분(요소 자체가 아닌 일부)에 스타일을 적용하기 위해 사용된다. 예를 들어, 첫 번째 줄이나 첫 글자에만 스타일을 지정하거나, 추가적인 가상 콘텐츠를 삽입할 수 있다.

구문

selector::pseudo-element {
  property: value;
}

Note: CSS3부터 pseudo-element에는 콜론 두 개(::)를 사용하는 것이 표준이다. 하지만 이전 버전에서는 콜론 한 개(:)도 사용 가능하다.

주요 Pseudo-elements

1. ::before : 요소의 콘텐츠 앞에 가상 콘텐츠를 삽입.

   h1::before {
     content: "★ ";
     color: gold;
   }

2. ::after : 요소의 콘텐츠 뒤에 가상 콘텐츠를 삽입.

   h1::after {
     content: " ★";
     color: gold;
   }

3. ::first-line : 요소의 첫 번째 줄만 스타일 지정.

   p::first-line {
     font-weight: bold;
   }

4. ::first-letter : 요소의 첫 글자만 스타일을 지정.

   p::first-letter {
     font-size: 2em;
     color: red;
   }

5. ::marker :목록 항목의 마커(점, 숫자 등)를 스타일링.

   li::marker {
     color: red;
     font-size: 1.2em;
   }

6. ::selection : 사용자가 선택한 텍스트를 스타일링.

   ::selection {
     background-color: yellow;
     color: black;
   }

7. ::placeholder : 입력 필드의 플레이스홀더 텍스트를 스타일링.

   input::placeholder {
     color: gray;
     font-style: italic;
   }