[ CSS 입문 ] 부모 자식 선택자

| 개요

 

선택자1 선택자2 { 속성1:속성값; 속성2:속성값; }

 

위 내용을 보면 "선택자1"과 "선택자2" 사이 공백을 넣어 앞쪽엔 부모선택자를 뒷쪽엔 자식선택자를 넣어 

하위에 있는 자식선택자에 스타일을 적용할 수 있습니다. 위 내용에선 "선택자2"에 스타일이 입히게 됩니다.

선택자에는 태그 선택자나 아이디 선택자, 클래스 선택자 중 모든 선택자를 사용 할 수 있습니다. 

이렇게 부모선택자와 자식선택자를 넣는 것은 좀 더 정확한 위치에 있는 선택자에 스타일을 입힐 수 있으며 

다른 동일한 선택자가 있다고 하더라도 다른 선택자는 제외하고 지정된 선택자에 스타일을 입힐 수 있습니다.

 

 

| 사용법

 

div span { text-align:center; padding-bottom:10px; }
div.box span { background-color:yellow; }
div#box span { text-align:center; color:red; }
div span .blue { color:blue; }
div span #cyan { background-color:cyan; }

 

1. div(부모선택자)의 하위 span(자식선택자)태그에 글 중앙정렬과 하단에 패딩 10px을 주어라
2. box라는 클래스를 가진 div(부모선택자)의 하위 span(자식선택자)태그에 백그라운드컬러를 노랑색으로 주어라
3. box라는 아이디를 가진 div(부모선택자)의 하위 span(자식선택자)태그에 글 중앙정렬과 글 컬러를 빨간색으로 주어라
4. div(부모선택자)의 하위 span(자식선택자1)태그의 하위 blue라는 클래스(자식선택자2)에 글 컬러를 파란색으로 주어라
5. div(부모선택자)의 하위 span(자식선택자1)태그의 하위 cyan이라는 아이디(자식선택자2)에 백그라운컬러를 사이언으로 주어라

 

위에 각 스타일에 대한 설명은 저만의 방식으로 달아 보았습니다.

위에서 보듯 한 단계의 자식선택자뿐 아니라 자식의 자식선택자까지

계속해서 내려가 더욱 정확한 위치의 선택자를 선택할 수 있습니다.

 

 

div > span { text-align:center; padding-bottom:10px; }
div.box > span { background-color:yellow; }
div > .box span { text-align:center; color:red; }
div span > .blue { color:blue; }

 

1. div(부모선택자)의 바로 하위 span(자식선택자)태그에 글 중앙정렬과 하단에 패딩 10px을 주어라
2. box라는 클래스를 가진 div(부모선택자)의 바로 하위 span(자식선택자)태그에 백그라운드컬러를 노랑색으로 주어라
3. div(부모선택자)의 바로 하위 box클래스(자식선택자1)의 하위 span(자식선택자2)태그에 글 중앙정렬과 글 컬러를 빨간색으로 주어라
4. div(부모선택자)의 하위 span(자식선택자1)태그의 바로 하위 blue라는 클래스(자식선택자2)에 글 컬러를 파란색으로 주어라

 

위 내용엔 > 라는 특수문자를 이용한 자식선택자 선택법으로 공백의 하위 선택자와 비슷하지만

정확하게는 "바로 하위" 라는 뜻으로 중간의 다른 선택자가 없이 순수하게 부모-자식간의 관계여야지만 선택이 가능합니다.

3번을 예를 들면 모든 div의 하위 box라는 클래스라 하면 div 바로 하위의 box클래스만 선택이되고

그 이하로 다른 box클래스가 있다고 하더라도 해당 부분엔 적용이 되지 않습니다.

 

실무에서 오직 한가지, 유일한 아이디값이나 클래스 값을 주면 좋겠지만 그렇지 못한 경우가 더욱 많습니다.

이럴때 다른곳에 어디서 어떻게 사용되고 있는지 알수없는 경우가 많아 위 내용과 같이 좀더 정확하게 

해당 선택자들을 선택하여 스타일을 입혀야겠습니다.