CSS 강좌 03강 - CSS 선택자 조합
※하위 선택자
▷어떠한 객체의 하위에 나오는 요소를 선택합니다.
▷하위 요소를 감싸고 있는 부모 객체가 먼저 입력하고 공백으로 구분한 후 하위 요소를 입력합니다.
사용법)
상위객체 하위요소{
}
예제)
<style type="text/css">
#wrap h1{
color:blue;
}
</style>
<body>
<div id="wrap">
<h1>Go Learning!</h1>
</div>
<h1>Go Learning!</h1>
</body>
예제를 보면 알겠지만, 첫 번째 div 객체의 h1 요소만 영향을 받고,
두 번째 h1 요소는 영향을 받지 않습니다.
※다중 선택자에 적용하기
▷여러 요소나 객체를 동시에 선언하여 스타일을 지정할 수 있습니다.
▷선택자와 선택자는 , 로 구분하여 나열합니다.
사용법)
선택자, 선택자, 선택자{
}
예제)
<style type="text/css">
p, h1, a{
color:blue;
}
</style>
<body>
<p>Go Learning!</p>
<h1>Go Learning!</h1>
<a href="http://kiara77.tistory.com/">Go Learning!</a>
</body>
※자식 선택자
▷어떠한 요소의 자식이 되는 요소에 대해 스타일을 지정합니다.
▷부모가 감싸고 있는 요소의 전부가 아닌 하위 요소만 적용이 됩니다.
사용법)
부모선택자 > 자식선택자{
}
예제)
<style type="text/css">
#listOne > li{
border:1px solid blue;
}
</style>
<body>
<ul id="listOne">
<li>Go</li>
<li>Learning!
<ul>
<li>Go</li>
<li>Learning!</li>
</ul>
</li>
</ul>
</body>
결과를 보면 두 번째 리스트에 li 요소에는 테두리가 생기지 않습니다.
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
|---|---|
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |
| CSS 강좌 02강 - CSS 선택자 (0) | 2016.03.02 |
| CSS 강좌 01강 - CSS 시작하기(CSS개념) (7) | 2016.03.02 |