TIL]first-child, last-child 선택자

가상 클래스와, 가상 요소를 쓰는 이유

타입 선택자, id, class 선택자, 전체 선택자로는 구체적인 작업을 할 수 없는 부분들을

작업하기 위해 사용한다.

예를 들어 어떤 요소도 첫 번째 줄만 선택해서 스타일을 주는 방법이 없는데

가상 클래스와 가상 요소를 사용하면 구체적으로 집어 스타일을 주는 것이 가능해진다.

---

first-child

first-child는 부모 요소 안에 있는 첫 번째 자식만을 선택할 수 있는 선택 자이다.

사용방법은 간단하다.

요소:first-child {속성: 속성 값;}

코드로 살펴보자면 아래와 같이 사용하면 된다.

html

<h1>예제</h1>
<div>
    <p>1번예제</p>
    <p>2번예제</p>
    <p>3번예제</p>
    <p>4번예제</p>
</div>

<h1>예제입니다.</h1>
<ol>
    <li>1번예제입니다.</li>
    <li>2번예제입니다.</li>
    <li>3번예제입니다.</li>
    <li>4번예제입니다.</li>
</ol>

css

p:first-child{color:blue;}

위의 예제에서는 p의 첫 번째 요소인 자식에만 파란색으로 폰트 컬러를 바꾸라고 하였다.

결과 화면은 나머지는 디폴트 값인 검은색으로 출력되고

1번 예제만 파란색으로 글씨가 바뀔 것이다.

1번 예제가 p(부모) 요소 안에 있는 첫 번째 자식이기 때문이다.

---

last-child

last-child는 first-child와 반대로 부모 요소 안에 있는 마지막 자식만 선택하는 선택 자이다.

사용방법은 frist-child와 같이 하면 된다.

요소:last-child {속성: 속성 값}

코드로 살펴보자면 아래와 같이 사용하면 된다.

html

<h1>예제</h1>
<div>
    <p>1번예제</p>
    <p>2번예제</p>
    <p>3번예제</p>
    <p>4번예제</p>
</div>

<h1>예제입니다.</h1>
<ol>
    <li>1번예제입니다.</li>
    <li>2번예제입니다.</li>
    <li>3번예제입니다.</li>
    <li>4번예제입니다.</li>
</ol>

css

ol > li:last-child{color:blue;}

위의 예제를 살펴보면 ol자식인 li요소에서 마지막 자식에만 파란색으로 폰트 컬러를 바꾸라고 하였다.

결과 화면은 나머지는 디폴트 값인 검은색으로 출력되고

4번 예제입니다만 파란색으로 글씨가 바뀔 것이다.

4번 예제가 ol > li(부모) 요소 안에 있는 마지막 자식이기 때문이다.

---

요즘에 토이 프로젝트를 하다 보니 욕심이 생기는 것 같다.

더 많은 기능을 구현해보고 싶고 더 보기 좋게 구성하고 싶다.

기능을 구현하는 것이 더 재미있고 성취감이 크지만

페이지를 이쁘게 꾸미는 것도 만족도가 높고 재미있다.

토이 프로젝트를 진행하면서 알게 된 first-child를 토이 프로젝트에 적용하고

first-child에 대하여 공부를 하였는데 last-child도 알게 되었다!

둘 다 정말 유용하게 쓰일 것 같다!