[CSS 기초] css 선택자 (2) 구조, 자식, 자손 선택자

 

 

안녕하세요 PNcoding입니다 :)

 

지난 포스팅에선 태그 ,클래스, 아이디 선택자에 대해 알아봤어요

이번 포스팅에선 또 다른 선택자인 자식, 자손, 구조 선택자에 대해 알아보도록 할게요 : )

 

 

앞의 내용이 궁금하신 분은 

https://pncoding.tistory.com/12

[CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자

 

여기를 참고해 주시면 되겠습니다 :)

 

---

 

 

1.  구조 선택자

부모 자식 관계 태그 중 원하는 '번째' 자식 요소를 선택할때 사용하는 선택자 입니다.

코드를 한번 살펴 볼게요!

 

CSS

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

 

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

 

HTML에선 ul 과 li 태그를 활용하여 태그를 구성 하였습니다.

이때 CSS에서 ul태그의 자식인 li 태그 중 두번째 자식만 선택하고 싶을땐 

:nth-child()를 사용하여 원하는 번째의 자식을 선택 할 수 있습니다. 

 

예시)

자식태그:nth-child(숫자){ }

 

 nth 즉 n번째의 뜻으로 원하는 번째 자식의 숫자를 입력하여 요소를 선택 할 수 있습니다.

 

구조 선택자 결과 화면

 

코드 결과 두번째 자식을 선택 하였기 때문에 두번째 요소에게 빨간색이 적용된걸 볼 수 있겠죠? 

:nth-child() 뿐만 아니라 :first-child, :last-child 속성이 있습니다. nth-child와 다르게

() 소괄호가 없으며, 첫번째 자식 또는 마지막 자식만 선택 할 수 있습니다.

 

1) 자식태그:first-child{ }

첫번째 자식만 선택 가능

li:first-child {
    color: orange;
}

 

 

2) 자식태그:last-child{ }

마지막 자식만 선택 가능

li:last-child {
    color: purple;
}

 

 

최종 결과 화면

 

 

 

---

 

 

 

2.  자식 선택자

자식선택자는 말 그대로 부모, 자식 관계 중 부모 안의 자식 요소를 선택 할 때 사용합니다. 

코드 한번 살펴 볼게요.

 

CSS

.three > a {
    font-size: 30px;
}

 

HTML

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="three">
    <a href="#">3</a>
  </li>
  <li><a href="#">4</a></li>
</ul>

 

이번코드에선 li 요소안에 a요소를 추가하였습니다.

하지만! 3번째 요소는 three 라는 class명을 추가해 보았어요.

 

예를들어 현재 우리는 a요소를 선택 할 수 있지만, 3번째 요소 안의 a요소만 선택 하고 싶다고 생각해 볼게요.

이전에 알고 있는 선택자로 선택하기 어렵겠죠? 이럴때 자식안의 요소를 선택하는 선택자가 자식 선택자 입니다!

 

코드에서 확인 할수 있듯이 > 꺽쇠 기호를 사용 해주시면 됩니다.

 

예시)

요소 > 자식{ }

 

자식 선택자 결과 화면

 

코드 결과 많은 a태그 중 .three라는 클래스명 안에 있는 a태그만 선택 하여 스타일을 적용 할 수 있습니다.

 

 

 

---

 

 

3.  자손(후손) 선택자

2번에서 알아본 자식 선택자와 비슷한 선택자 입니다.

자식 선택자는 선택된 요소의 바로 뒤에 있는 요소가 선택된다면, 

자손 선택자는 선택된 요소의 안의 모든 요소가 선택 됩니다. 

 

코드를 통해 결과를 알아 봅시다. 

 

먼저 HTML 구조 먼저 볼게요!

 

HTML

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>

아까와 비슷한 구조 이며 이번엔 클래스가 적용되지 않았습니다.

 

 

먼저 자식 선택자를 통하여 ul태그 안에 있는 a태그를 선택해 보겠습니다.

 

CSS (자식 선택자 예시)

ul > a {
    color: red;
}

 

자식 선택자 결과 화면

 

자식 선택자를 이용하여 ul의 자식인 a태그를 선택하여 색상을 빨간색으로 변경하였으나,

화면 확인 결과 변경되지 않는점을 볼 수 있습니다.

 

 

이번엔 자손 선택자를 사용해 보겠습니다! 

 

CSS (자손 선택자 예시)

ul a {
    color: red;
}

 

자손 선택자 사용 방법은 띄어쓰기로 구분하여 작성 합니다.

 

예시)

요소   자식{ }

 

자손 선택자 결과 화면

 

결과를 확인하면 스타일이 잘 적용된걸 볼 수 있습니다! 

이로써 여러분들이 코드를 작성하면서 경우에 따라 원하시는 선택자를 써주시면 됩니다.

 

 

 

---

 

 

 

여기까지 선택자 6가지에 대해 알아보았습니다.

다음 포스팅에선 CSS 배경 속성에 대해 알려드리겠습니다 :)