[CSS] Pseudo class, element

🌼 Pseudo class, element

Pseudo는 "가짜의", "모조의"라는 뜻을 가진 단어로 Pseudo class, element는 단어 뜻 그대로 실제로는 없는 클래스, 실제로는 없는 가상의 선택자를 의미한다.

🌼 가상 클래스(Pseudo class)

가상 클래스는 실제로 존재하는 태그 중 특정 상태에 있는 요소를 선택할 때 사용하는 선택자이다. 예를들어 해당 유형의 첫 번째 요소이거나 마우스 포인터로 가리키고 있는 요소를 선택할 때 사용할 수 있다. 가상 클래스를 사용하면 특정 요소에 class 이름을 정의한 것과 같은 효과로 CSS 스타일링을 적용할 수 있다.

가상 클래스는 실제 존재하는 요소 선택자에 :pseudo-class-name을 붙여서 사용한다.

<article>
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>
  <p class="first">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

위와 같은 HTML 코드에서 article의 자식요소들 중 P 태그의 첫번째에 해당하는 요소에 스타일링을 주고 싶을 때 클래스명을 지정할 수도 있지만 만약 새로운 요소가 추가된다면 그에 맞춰 클래스명을 수정해야하는 번거로움이 있다. 하지만 이럴 때 가상 클래스를 사용하면 별도의 클래스명 수정없이 CSS 효과를 줄 수 있다.

article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

🌼 가상 요소(Pseudo element)

가상 요소는 가상 클래스와 유사한 방식으로 동작한다. 하지만 기존 요소에 클래스를 추가한 것처럼 동작하는 것이 아니라 실제 존재하지 않는 HTML 요소를 기존 HTML 파일에 추가한것처럼 동작한다.

가상 요소는 실제 존재하는 요소 선택자에 ::pseudo-element-name를 붙여서 사용한다. 가상 요소는 종종 컨텐츠의 내용(?)과는 연관이 없으나 구조적으로는 존재해 스타일링의 적용이 필요한 경우, 실제 요소를 추가하지 않고 가상 요소를 사용하여 스타일링을 줄 때 사용한다.

출처: MDN