728x90
두개 이상의 선택자를 결합하여 특정 요소를 선택하는데 사용된다.
그룹핑(Grouping)
선택자들을 그룹화 하여 공통 스타일을 적용하여 중복된 스타일을 제거함.
같은 속성을 지닌 선택자가 발생했다면 , 그룹핑을 이용해 중복된 스타일을 제거할 수 있다.
A , B → A,B 태그에 적용
A , B , D → A,B,D 태그에 적용
<style>
h2 , dt{
color: blue;
}
h3 {
color: red;
}
dd {
color: red;
}
</style>
인접형제 결합자
부모가 동일한 형제 요소에 대하여 + 결합자 이후 최종 형제 요소에 스타일 적용.
형제 요소의 명칭이나 순서가 일치해야만 적용됨 .
★ 최종 우변 형제 요소에만 스타일 적용 ★
A+B → B 태그에 적용
A+B+C → C 태그에 적용
h2+h3+h3 {
color: red;
}
dt+dd {
color: blue;
}
h1+h2 {
color: green;
일반 형제 결합자
부모가 동일한 인접 형제 요소에 대하여 선행 요소를 제외한 ~ 뒤에 지정된 모든 요소에 대하여 스타일 적용.
A ~ C → A 태그 뒤의 모든 C (형제) 태그에 대해 적용됨.
A ~ D → A 태그 뒤에 모든 D(형제) 태그에 대해 적용됨.
h1~hr {
border: dashed;}</style>
</head>
<body>
<h1>일반 형제 결합자</h1>
<hr>
<h2>CSS</h2>
<h3>인라인 스타일 시트</h3>
<h3>내부 스타일 시트</h3>
<h3>외부 스타일 시트</h3>
<hr>
자식 결합자
'>' 를 사용하여 부모와 자식 요소를 구분하여 지정된 자식 요소를 포함한 직계 서브 요소에 스타일링 적용.
단, 상속이 적용되는 속성은 상속 규칙에 의거하여 동일한 스타일 적용.
A>B → A 자식인 B 자식요소를 포함한 직계 서브요소에 스타일 적용.
A>B>C → A 자식인 B 자식인 C 자식요소를 포함한 직계 서브요소에 스타일 적용.
body>div {
color: red;
}
body>div>div {
color: blue;
}
body>div>div>div {
color: green;
}
</style>
</head>
<body>
<h1>자식 결합자</h1>
<hr>
<div>할아버지, 할머니
<hr>
<div>큰아빠, 큰엄마
<div>아들</div>
<div>딸</div>
</div>
<hr>
<div>작은아빠, 작은엄마
<div>아들</div>
<div>딸</div>
</div>
</div>
자손 결합자
공백 문자(띄어쓰기)를 사용하여 첫번째 태그 선택자의 하위 두번째 선택자로 스타일링 적용.
바로 아래 자식요소 뿐 아니라 여러단계 아래 후손요소까지 선택가능.
할아버지태그 아빠태그 { 속성 } → 아빠 태그 아래요소들로 적용.
할아버지태그 아들 태그 { 속성 }→ 아들 태그 아래요소들로 적용.
<style>
body h2 {
color: red;
}
body ul {
color: blue;
}
</style>
</head>
<body>
<body>
<h1>자손 결합자</h1>
<hr>
<h2>조부모</h2>
<ul>
<li>할아버지</li>
<li>할머니</li>
</ul>
<hr>
<div>
<h2>부모님</h2>
<ul>
<li>아빠</li>
<li>엄마</li>
</ul>
</div>
</body>
'Developer > HTML_CSS' 카테고리의 다른 글
| 폰트 기반의 아이콘 사이트 , 폰트 어썸. (0) | 2024.04.15 |
|---|---|
| CSS,가상 클래스 (요소) 선택자, 그의 트리구성 , 속성 선택자까지 알아보자. (0) | 2024.04.15 |
| CSS, 기초와 선택자를 알아보자 (0) | 2024.04.14 |
| HTML/CSS , 인라인 , 내부링크 , 외부링크 (0) | 2024.04.14 |
| HTML ,select 와 option 을 알아보자 (0) | 2024.04.12 |