CSS에서는 선택자를 이용하여 적용할 요소를 선택할 수 있다. 속성선택자, 클래스선택자들에 대해서는 이전 문서에서 설명했었고 그 외의 선택자들에 대해 설명하고자 한다. 더 많은 선택자들은 W3School에서 볼 수 있다.
- 상위요소 하위요소{}
하위선택자로 어디에 있든 상관 없이 조건에 맞으면 스타일이 적용된다 (ex) div p{} - div안에 있는 모든 p태그들) - 상위요소>하위요소{}
자식선택자로 부모 요소의 자식 요소에만 스타일이 적용된다. (ex) .div1>p{} - div1 부모클래스 안에 있는 모든 p태그들) - 최상위요소>상위요소>하위요소{}
이런식으로 선택자를 연쇄적으로 사용할 수 있다. 이렇게 사용할 경우 적은 클래스로도 타켓팅이 가능하다. - 최상위요소.상위요소>하위요소{}
선택자를 중첩해서 사용하는 방법으로 동일한 클래스가 여러 곳에 있을 때 타켓팅이 가능하다. (ex) div.div3>p - div태그이면서 클래스명이 div3이고 p태그인 요소) - 요소+요소{}
인접형제선택자로 같은 부모를 가진 요소들을 형제관계라고 부르는데, 내 바로 아래에 있는 요소한테 스타일을 적용한다는 뜻이다. - 요소~요소{}
형제선택자로 같은 계층에 있으며 인접해 있는 아래 요소들에게 스타일이 적용된다. 같은 계층에 있는 요소만을 선택할 수 있기 때문에 태그의 위치를 확인해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width:200px;
}
/* 하위선택자 */
div span{
color: brown;
}
/* 자식선택자 */
.div2>p {
background-color: lightblue;
}
/* 연쇄적으로 선택자 사용 */
div>div>div>p{
color: blue;
}
/* 선택자를 중첩해서 사용 */
div.div>p{
color: white;
}
/* 인접형제선택자 */
.div3>p+span{
background-color: bisque;
}
/* 형제선택자 */
div>p~p{
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="div1">
<p>요소</p>
<div class="div2">
<p>요소</p>
<p>요소</p>
<div class="div3">
<p>요소</p>
<span>요소</span>
</div>
</div>
<p>요소</p>
</div>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3로 동적 변화를 만들어보자 - 1. Transform (0) | 2024.07.08 |
|---|---|
| CSS의 선택자(selector) - 4. :target, :not (0) | 2024.07.07 |
| CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) (0) | 2024.07.07 |
| CSS의 선택자(selector) - 2. 속성선택자 (0) | 2024.07.07 |
| CSS를 이용해 오디오와 비디오를 넣어보자 (0) | 2024.07.07 |
| CSS의 width와 height 속성을 알아보자 (0) | 2024.07.07 |
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |
| CSS에서의 배치 방법 (0) | 2024.07.07 |