이전 포스팅에서는 태그선택자, 전체선택자, class선택자, id선택자를 살펴보았습니다.
이번 포스팅에서는 자손선택자, 자식선택자, 인접형제선택자, 그룹선택자를 살펴보도록 하겠습니다.
5. 자손선택자(하위선택자) element element{속성:값; 속성:값;}
<head>
<style>
div h2{color:blue;}
<style>
</head>
<body>
<div>
<h1>선택자의 종류</h1> -------------a
<h2>자손선택자</h2> -------------b
<h2>자손선택자2</h2> -------------c
<nav>
<h2>선택자 확인</h2> -------------d
</nav>
<h2>가나다</h2> -------------e
<h2>마바사</h2> -------------f
</div>
<ul>
<li>자손선택자</li> -------------g
<li>자식선택자</li> -------------h
<li>인접선택자</li> -------------i
<ul>
<p>
</p>
<body>위의 예제에서 div h2{color:blue;} 를 적용하면 b, c, d, e, f 부분이 파란색으로 바뀝니다. div 한 칸 띄고 h2를 하면 div 밑에 있는 h2들의 속성은 모두 같은 속성값을 적용하라는 뜻입니다. 자손의 자손의 자손까지 모두 적용됩니다.(자식선택자가 아닌 자손선택자이므로) 반드시 div 다음에 한칸을 띄어야 합니다.
6. 자식선택자 element>element{속성:값; 속성:값;}
부모가 직접 배가 아파서 나은 자식들.(단, 자식이 하나라는 법은 없음)
위의 예제에서 div>h2{ } 이렇게 스타일을 주면, div가 직접 배 아파서 난 자식 중 h2들에 같은 속성을 준다는 것입니다. 위의 예제에서는 b, c, e, f 가 같은 스타일이 적용되겠군요. d는 배 아파서 난 자식이 아니므로 적용되지 않습니다. 반드시 바로 밑에 거 하나만 선택되는 것이 아님에 주의해야 합니다.
7. 인접형제선택자
element element+element{속성:값; 속성:값} or
element element~element{속성:값; 속성:값}
위 예시에서 (c는 그대로두고) b 만 파란색으로 변경하고 싶다면, div h1+h2{ } 이런식의 스타일을 적용해주면 됩니다.
또 위 예시에서 e와 f만 파란색으로 변경하고 싶다면 div nav~h2{color:blue;} 로 스타일을 지정해주시면 됩니다.
8. 그룹선택자 element, element{속성:값; 속성:값;}
위 예시에서 a, e, f에 같은 속성을 주고 싶다면 그룹화를 할 수 있습니다. div h1, nav~h2{ } 와 같이 쉼표를 통해 그룹화를 할 수 있습니다. 여러개의 요소들을 한꺼번에 묶어서 별도로 class명을 부여하지 않아도, 그룹을 지어주어 스타일을 동일하게 적용할 수 있습니다.
선택자를 공부하고 있는데 만만치가 않네요. 기록해놓고 계속 연습해보아야겠습니다.
'Etc2' 카테고리의 다른 글
| [CSS] display속성 - block과 inline (0) | 2020.02.25 |
|---|---|
| [CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 태그, 전체, class, id선택자 (0) | 2020.02.23 |
| [CSS] 단위 - vm, vh, vmin, vmax (0) | 2020.02.23 |
| [CSS] 단위 - px, %, em, rem (0) | 2020.02.23 |
| 티스토리 마우스 드래그 금지, 마우스 우클릭 금지 소스 (4) | 2019.10.12 |