1. 연결 선택자란?
선택자에 다른 선택자를 연결하여 적용 대상이 되는 태그를 한정시키는 선택자를 말한다.
2. descendant selector : 자손 선택자
기본형 상위요소 하위요소
구분 요소 : 공백
적용 범위 : 지정한 모든 하위 요소에 스타일 적용
자손 선택자는 부모(조상) 요소에 포함되는 모든 하위요소에 대한 스타일 적용을 위하여 사용하는 선택자이다.
부모 요소에 포함되는 자식 요소뿐만 아니라 자손 즉 손자 요소에게도 그 영향이 미친다는 특징이 있다.
<style>
div p {
color: darkblue;
}
</style>
</head>
<body>
<div>
<p>
자식 p 1
</P>
<h1>
<p>
손자 p 1
</p>
</h1>
</div>
</body>위의 코드에서 스타일을 적용하고자 하는 범위는 div 태그 내에 있는 p 태그 전부이다.
때문에 자손 선택자를 사용하여 상위요소 쪽에 div 를 하위요소 쪽에 p 를 작성하여 출력하였다.
자손 선택자는 더 세부적으로 작성할 수도 있다.
만약 자식 p 태그가 아닌 손자 p 태그에만 스타일을 적용하고 싶다면 다음과 같이 선택자를 추가하면 된다.
<style>
div h1 p {
color: darkblue;
}
</style>
</head>
<body>
<div>
<p>
자식 p 1
</P>
<h1>
<p>
손자 p 1
</p>
</h1>
</div>
</body>
</html>
3. child selector : 자식 선택자
기본형 부모요소 > 자식요소
구분 요소 : >(부등호)
적용 범위 : 자신이 (자식요소)이면서 부모를 (부모요소)로 가진 요소들만 스타일이 적용된다.
자식 선택자는 위의 자손 선택자와 종종 비교되는데 스타일의 적용 범위가 다르다는 것을 유의해야 한다.
자손 선택자는 선택된 하위요소가 부모 또는 조상 중 상위요소인 경우 모두 적용된다는 것이고,
자식 선택자는 선택된 자식요소가 부모로 부모요소를 가진 경우 모두 적용된다는 것이다.
예제를 살펴보자.
<style>
h1 > p {
color: darkblue;
}
</style>
</head>
<body>
<div>
<p>
자식 p 1
</P>
<h1>
<p>
손자 p 1
</p>
</h1>
</div>
</body>스타일을 적용하고자 한 부분은 본인이 p 태그이면서 h1 태그를 부모로 가진 부분이다.
즉 손자 p 태그 부분에만 적용해 보려고 한다.
이번에는 자식 p 태그에만 적용되도록 코드를 변경해 보겠다.
<style>
div > p {
color: darkblue;
}
</style>
</head>
<body>
<div>
<p>
자식 p 1
</P>
<h1>
<p>
손자 p 1
</p>
</h1>
</div>
</body>
예제에서도 알 수 있듯이 자식 선택자는 손자 선택자까지 영향을 주지 않는다는 것을 기억해야 한다.
4. abjacent selector : 인접 형제 선택자
기본형 : 요소 1 + 요소 2
구분 요소 : +
적용 범위 : 같은 부모요소를 가진 형제 요소 중 가장 인접한 동생 요소
먼저 형 요소와 동생 요소를 구분할 필요가 있다.
같은 부모 요소를 가지는 요소들을 형제 관계로 볼 때에 가장 먼저 쓰인 요소를 형 요소로 나중에 나오는 요소를 동생 요소로 부르는 것이다.
즉 요소가 세개 있다면, 첫째, 둘째, 셋째의 관계로 해석할 수 있다는 것이다.
인접 형제 선택자는 본인이 요소 2 면서 형 요소로 요소 1을 가지고 있는 요소에만 스타일을 적용한다.
예를 들어 다음과 같은 코드가 있다고 해보자.
<style>
table td {
border: 2px solid darkblue;
width: 50px;
height: 50px;
padding: 1em;
}
</style>
</head>
<body><table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
이 예제 표의 2번의 너비는 100px, 3번의 너비는 150px, 4번의 너비는 200px, 5번의 너비는 250px로 변경하려면 어떻게 해야 할까?
먼저 2번의 너비를 조정해보기 위하여 td + td 에 스타일을 적용해 보자.
table td {
border: 2px solid darkblue;
width: 50px;
height: 50px;
padding: 1em;
}
td + td {
width: 100px;
}
2번의 너비를 변경하기 위하여 적용했던 td + td 가 3, 4, 5번의 너비에도 영향을 미쳤다.
왜 이런 결과가 나오게 되었을까?
앞서 말했듯이 인접 형제 선택자는 본인이 td 이면서 td 를 형 요소로 가지고 있는 모든 요소라고 하였다.
때문에 3, 4, 5번 또한 조건이 성립되기 때문에 이러한 결과가 나타난 것이다.
3, 4, 5번도 변경하기 위해서 코드를 수정해 보겠다.
table td {
border: 2px solid darkblue;
width: 50px;
height: 50px;
padding: 1em;
}
td + td {
width: 100px;
}
td + td + td {
width: 150px;
}
td + td + td + td {
width: 200px;
}
td + td + td + td + td {
width: 250px;
}
5. sibling selector : 형제 선택자
기본형 요소1 ~ 요소 2
구분 요소 : ~
적용 범위 : 모든 형제 요소
형제 선택자는 앞서 말한 인접 형제 선택자와 달리 같은 형제로 있으면 모두 적용된다는 특징을 가지고 있다.
요소 1 다음에 오는 모든 요소 2 태그에 스타일이 적용된다.
td ~ td {
background-color: cornflowerblue;
}스타일을 위와 같이 이렇게 적용한다고 해보자.
그럼 자신이 td 태그이면서 td 태그를 형 요소로 가지고 있는 요소를 대상으로 한 것이다.
이를 적용하면 다음과 같은 결과를 얻을 수 있다.
1번 영역이 영향을 받지 않은 이유를 알 수 있겠는가?
1번 영역은 본인이 td 태그이지만 형 요소로 td 태그를 가지지 못 했기 때문에 적용 대상에서 제외된 것이다.
'CSS' 카테고리의 다른 글
| 가상 클래스와 가상 요소 (0) | 2022.10.26 |
|---|---|
| 속성 선택자 (0) | 2022.10.26 |
| HTML5 시멘틱 태그 (0) | 2022.10.24 |
| 표 스타일 속성 (0) | 2022.10.24 |
| z-index 속성 (0) | 2022.10.24 |
