[CSS selector] 자손 선택자와 자식 선택자, 다중 조건 선택자(and, or)

자손 선택자와 자식 선택자

모든 html태그는 서로 부모 자식관계를 이루고 가족관계를 이룹니다. 어떤 태그의 하위 태그들을 자손 태그라고 부르고 그중에 특히 부모 바로 밑에 있는 자손을 자식 태그라고 부르는데 css에서는 이 자식과 자손을 선택하는 방법이 구분되어있습니다.

자손 선택자 사용법

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

선택자1 이 부모 element, 선택자2가 자손 element 입니다.

이렇게 하면 부모 태그 하위에 있는 선택자2에 해당하는 모든 자손 태그에 스타일을 적용시킵니다.

자식 선택자 사용법

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

선택자1이 부모 element, 선택자2가 자식 element 입니다.

이렇게 하면 부모 태그 하위에 있는 선택자2에 해당하는 모든 자식 태그에 스타일을 적용시킵니다.

자손 선택자와 자식 선택자 예제

자식과 자손 모두 가지고 있는 div 태그의 예시를 보며 위 두 가지 경우의 차이를 눈으로 직접 봐볼까요?

* 예시 코드

<body>
    <div class="redbox">
        <span>content</span>
        <span class="content">content</span>
        <div>
            <span class="content">content</span>
        </div>
    </div>
    <div class="bluebox">
        <span>content</span>
        <span class="content">content</span>
        <div>
             <span class="content">content</span>
        </div>
    </div>
</body>

class명이 redbox인 div태그와 bluebox인 div태그에 모두 class명이 content인 span 태그를 자식 요소와 자손 요소로 각각 넣어봤습니다.

이제 여기에 자손 선택자를 적용하는 경우와 자식선택자를 적용하는 경우 어떻게 달라지는지 살펴보겠습니다.

* 자손선택자 예시 코드

<head>
	<style>
		body {
			color:green;
		}
		.redbox .content {
			color: red;
		}
		.bluebox .content {
			color: blue;
		}
	</style>	
</head>

* 자손 선택자 결과

* 자식 선택자 예시 코드

<head>
	<style>
		body {
			color:green;
		}
		.redbox > .content {
			color: red;
		}
		.bluebox > .content {
			color: blue;
		}
	</style>	
</head>

* 자식 선택자 결과

어떤 태그의 모든 하위 태그에 적용하고 싶으면 자손 선택자를,

어떤 태그의 자식 태그에만 적용하고 싶으면 자식 선택자를 사용하면 될 것 같습니다.

다음으로는 다중 조건 선택자에 대해 살펴보겠습니다.

CSS에서도 논리 연산자인 and와 or로 선택자를 사용할 수 있습니다.

and는 교집합을 의미하여 모든 조건을 만족해야 한다는 논리 연산자이고,

or는 합집합을 의미하여 모든 조건 중 하나만 만족해도 된다는 논리 연산자입니다.

이를 CSS 선택자에 적용하면

and는 모든 선택자에 해당하는 엘리먼트에게만 CSS속성 값을 적용하겠다는 것이고,

or은 모든 선택자 중 하나라도 해당되는 엘리먼트들에게 적용하겠다는 의미입니다.

다중 조건 선택자 and 사용법

선택자1선택자2 {

    속성: 속성값;

}

선택자끼리 띄어쓰기 없이 붙여서 쓰면 and와 같습니다. 이렇게 하면 선택자1과 선택자2를 모두 만족하는 엘리먼트들에게 해당 style을 적용합니다.

* 예시 코드

<head>
    <style>
        div { width: 50px; height: 50px; border: 1px solid black; margin: 10px; }
        div#red {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="red"></div>
</body>

* 결과

두 번째 div태그는 and선택자에 의해 border의 색상이 red가 적용되었습니다.

다중 조건 선택자 or 사용법

선택자1, 선택자2 {

    속성: 속성값;

}

선택자끼리 쉼표로 구분하면 됩니다. 이렇게 하면 선택자1과 선택자2 중 어느 하나라도 만족하는 엘리먼트들에게 해당 style을 적용합니다.

* 예시 코드

<head>
    <style>  
        #one, #two{
            color: blue;
        }
    </style>
</head>
<body>
    <span id="one">one</span>
    <span id="two">two</span>
</body>

* 결과