ohjungho 님의 블로그

가상 클래스 : first-child 본문

Front-end/HTML,CSS

가상 클래스 : first-child

ohjungho 2025. 3. 12. 23:58

구조적 가상 클래스

구조적 가상 클래스(structural pseudo classes)는 CSS에서 id, class 등의 선택자를 사용하지 않고 요소를 선택할 수 있다. 이렇게 하는 이유는 코드를 효율적으로 작성하기 위함이다.

 

학교에서 수학 문제를 앞에 나와서 풀 사람을 구할 때 선생님께서 이름을 부를 수도 있지만 번호로 부를 때도 있는 것처럼 태그도 id나 class 같은 이름이 아니라 가상 클래스로 불리는 것이다.

 

대표적인 구조적 가상 클래스는 first-child, lats-child, nth-of-type, only-of-type이다.

 

 

first-child를 학습할 때 개념에서 혼란이 왔다. 개념 자체는 어렵지 않지만 나는 학습을 할 때 원리와 이해를 바탕으로 하기 때문에 문장을 이해하고 코드를 통해 여러 상황 시나리오들을 통해 학습을 해야 완전한 내 것으로 되었다고 생각하기 때문이다 그래서 2시간 정도 탐구한 것 같다.

 

first-child의 핵심은 2가지 개념이라고 생각한다. 2가지의 개념을 알아야 first-child를 이해한 거라고 생각한다.

 

 

 

형제 중 첫 번째 요소 선택하기 : first-child

first-child는 형제 요소 중 첫 번째, 즉 맏이 요소를 나타낸다. 형제 요소를 선택하기 때문에 first-child로 선택하는 대상은 반드시 부모 요소를 가지고 있어야 한다.

<style>
  p:first-child {
    color: lime;
  }
</style>

 

 

주의할 점

띄어쓰기에 주의해야 한다. CSS에서는 띄어쓰기는 자식 요소를 의미하기 때문에 띄어쓰기 없이 p:first-child를 작성하면

 

형제 p 태그 중 첫 번째 요소를 가리키지만 띄어쓰기를 사용하여 p :first-child를 쓰면 p 태그의 자식 요소 중 첫 번째 요소를 가리킨다.

 

 

first-child는 반드시 부모가 있어야 한다.

  • first-child는 부모 안에서 첫 번째 자식 요소를 찾는 선택자이다.
  • 만약 부모가 없으면, 비교할 형제 요소도 존재하지 않으므로 first-child라는 개념이 성립되지 않는다.

 

first-child를 학습할 때 개념에서 혼란이 왔다. 개념 자체는 어렵지 않지만 나는 학습을 할 때 원리와 이해를 바탕으로 하기 때문에 문장을 이해하고 코드를 통해 여러 상황 시나리오들을 통해 학습을 해야 완전한 내 것으로 되었다고 생각하기 때문이다 그래고 2시간 정도 탐구한 것 같다.

 

first-child의 핵심은 2가지 개념이라고 생각한다. 2가지의 개념을 알아야 first-child를 이해한 거라고 생각한다.

 

 

첫 번째 개념 : "형제 요소"를 선택한다는 의미

  • "형제 요소"를 선택한다는 의미는 같은 부모를 가진 요소들 중에서 특정한 요소를 선택한다는 뜻이다.
    즉, 여러 요소가 하나의 부모 아래에 있을 때 그들 간에는 형제 관계가 성립된다
<div> 
<p>첫 아들 오준호</p>
<p>둘 째 오치호</p>
<p>막내 오정호</p>
</div>
p:first-child {
    color: blue;
}

 

  • 같은 부모를 가진 요소 div들 중에서 (특정한=첫 번째) 요소 오준호를 선택한다 여러 p요소가 있지만 하나의 부모 아래에 있으므로 오준호 오치호 오정호는 형제 관계가 성립되고 "형제 요소"를 선택한다는 의미이다.

 

 

두 번째 개념 : "반드시 부모 요소를 가져야 한다"는 의미

  • "반드시 부모 요소를 가져야 한다"는 의미는 형제 요소들 중 첫 번째 요소를 선택하는 것이기 때문에, 부모 요소가 없으면 형제 관계도 성립되지 않는다.
  • first-child 선택자가 작동하기 위해서는 부모-자식관계가 있어야 한다는 점이다. 부모 요소 안에서 첫 번째 자식 요소를 선택하는 선택자이기 때문이다.

부모가 없다면 자식이 존재할 수 없고, 따라서 first-child가 무엇을 선택할지 기준점이 없어진다.

 

부모가 없으면 형제 관계도 성립되지 않는다. 형제 요소 중 첫 번째 요소를 선택하는 것인데,

 

형제 요소란 같은 부모를 가진 요소들을 의미한다. 그런데 부모가 없다면?? 형제 요소(오준호, 오치호, 오정호)가 존재할 수 없기 때문에 first-child가 의미를 갖지 않게 된다.

 

<p>첫 아들 오준호</p>
<p>둘 째 오치호</p>
p:first-child {
    color: blue;
}

 

위 구조에서는 p태그들이 부모 요소 없이 독립적으로 존재한다. 하지만 p:first-child는 선택자는 동작하지 않는다. 부모 요소가 없기 때문에

 

자식 요소로 간주될 수 없고 부모가 없으므로, "첫아들 오준호"를 지정할 수 없고, 비교할 "형제 요소"도 존재하지 않는다.

 

 

 

body는 암묵적인 부모가 된다.

  • 브라우저는 모든 HTML 요소를 body 안에서 렌더링 하므로, 태그가 생략되었더라도 존재하는 것처럼 동작한다.
<body>
  <p>첫 아들 오준호</p>
  <p>둘 째 오치호</p>
</body>

 

  • 여기서 p태그들은 body의 자식 요소이므로, first-child는 body 안에서 첫 번째 p태그를 선택하게 된다.

 

한 문장으로 중요하게 강조하자면,

 

first-child는 부모 요소 내에서 첫 번째 자식 요소를 선택하는 선택자이므로, 부모-자식 관계가 성립하지 않는 독립적인 요소들에서는 first-child 선택자가 동작하지 않는다.

'Front-end > HTML,CSS' 카테고리의 다른 글

CSS 애니메이션  (0) 2025.02.22
CSS 레이아웃 : 위치 지정  (0) 2025.01.22
CSS 레이아웃 : flex box  (0) 2025.01.09
css 배치 속성과 반응형 웹  (1) 2024.12.31
CSS  (1) 2024.12.13
'Front-end/HTML,CSS' Related Articles more