[CSS] 결합자 (Combinator) : 인접 형제 / 일반 형제 / 자식 / 후손
by mini_min[CSS] 결합자 (Combinator) : 인접 형제 / 일반 형제 / 자식 / 후손
✔️ 인접 형제 결합자
: (+) : 앞에서 지정한 요소의 바로 다음에 위치한 형제 요소만 선택한다.
✨ 위로는 찾을 수 없다.... 무조건 아래로... 내려감
label + span {background: yellow;}
✔️ 일반 형제 결합자
: (~) : 두 개의 선택자 사이에 위치하여, 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다. (두 요소가 붙어있을 필요 없다.)
: A ~ B 의 표현은 A 형제 요소 중, A 뒤에 위치하는 B 요소 모두를 선택한다.
label ~ span {background: lightblue; font-weight: 600;}
✔️ 자식 결합자
: (>) : 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택한다.
: A > B 의 표현은 A의 자식 요소 중 B와 일치하는 모든 요소를 선택한다. 단, 손자 요소는 선택안한다. 바로 자식만!!!!
.subject > label {color: tomato; font-weight: 600;}
✔️ 자손 결합자
: (공백) : 공백 문자로 표현하는 자손 결합자는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상에 앞쪽 선택자 요소가 존재할 경우 선택한다.
: 자신 결합자를 활용하는 선택자를 자손 선택자라고 한다.
: A B 표현은 A의 모든 후손(하위) 요소 중 B 와 일치하는 요소를 선택한다.
/*자손 결합자(공백)*/
.subject label {background: #ccc; font-weight: 600;}
📓 결합자 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*위로는 찾을 수 없다....*/
/*인접 형제 결합자(+)*/
label + span {background: yellow;}
/*일반 형제 결합자(~)*/
label ~ span {background: lightblue; font-weight: 600;}
/*자식 결합자(>)*/
.subject > label {color: tomato; font-weight: 600;}
/*자손 결합자(공백)*/
.subject label {background: #ccc; font-weight: 600;}
</style>
</head>
<body>
<h3>Selector : 결합자(Combinator)</h3>
<div class="box">
<div class="subject">
<label>프로그래밍</label>
<span>자바</span>
<span>C언어</span>
<span>코틀린</span>
<p>
<label>데이터베이스</label>
<span>오라클</span>
<span>mysql</span>
<span>빅데이터</span>
</p>
</div>
<div class="subject">
<label>웹</label>
<span>HTML</span>
<span>CSS</span>
<span>javascript</span>
<p>
<label>웹프로그램</label>
<span>JSP</span>
<span>PHP</span>
<span>ASP.NET</span>
</p>
</div>
</div>
</body>
</html>Selector : 결합자(Combinator)
자바
C언어
코틀린
오라클 mysql 빅데이터
HTML
CSS
javascript
JSP PHP ASP.NET
'HTML' 카테고리의 다른 글
| [CSS] 가상 요소 (Pseudo-elements) / ::after, ::before (0) | 2022.09.14 |
|---|---|
| [CSS] 가상 클래스 (Pseudo-classes) (0) | 2022.09.14 |
| [CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector (0) | 2022.09.14 |
| [CSS] 상속 (Inheritance) / 캐스캐이딩 (Cascading Order) (0) | 2022.09.13 |
| [CSS] CSS 프로퍼티 값 (단위) (0) | 2022.09.13 |
블로그의 정보
개발자 미니민의 개발로그
mini_min