728x90
조상 자손 선택자
ex) ul>li 이면 ul태그 밑에 li태그라는 의미이다.
예시를 코드로 보자.
<html>
<head>
<meta charset="utf-8">
</head>
<style>
ul>li{
color : red;
font : 1rem,arial
}
</style>
<body>
<h1>수업자 명단</h1>
<ul>
<li>김용민</li>
<li>이석진</li>
<li>유현석</li>
<li>이혁주</li>
</ul>
<h1>수업표</h1>
<ol>
<li>자바</li>
<li>파이썬</li>
<li>CSS</li>
<li>C++</li>
</ol>
</body>
</html>
보기와 같이 ul 밑에 li만 빨간색으로 된 것을 볼 수 있다.
부모 자식 선택자
아이디 밑에 li만 선택한다.
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#select>li {
color: red;
font: 1rem arial
}
</style>
<body>
<h1>수업자 명단</h1>
<ul>
<li>김용민</li>
<li>이석진</li>
<li>유현석</li>
<li>이혁주</li>
</ul>
<h1>수업표</h1>
<ol>
<li>자바</li>
<li>파이썬</li>
<li>CSS</li>
<li>C++</li>
</ol>
<h1>쉬는시간</h1>
<ol id = "select">
<li>없음</li>
<li>5분</li>
<li>10분</li>
</ol>
</body>
</html>
같은 ol이지만 아이디가 같은 ol의 li만 빨간색으로 변한다.
친구 선택자
<html>
<head>
<meta charset="utf-8">
</head>
<style>
ul,ol {
color: red;
font: 1rem arial
}
</style>
<body>
<h1>수업자 명단</h1>
<ul>
<li>김용민</li>
<li>이석진</li>
<li>유현석</li>
<li>이혁주</li>
</ul>
<h1>수업표</h1>
<ol>
<li>자바</li>
<li>파이썬</li>
<li>CSS</li>
<li>C++</li>
</ol>
<h1>쉬는시간</h1>
<ol id = "select">
<li>없음</li>
<li>5분</li>
<li>10분</li>
</ol>
</body>
</html>
이러면 ol,ul태그 전부 빨간색으로 변한다.
728x90
'css 기초' 카테고리의 다른 글
| [CSS 기초][CSS - 레이아웃] (0) | 2021.11.23 |
|---|---|
| [CSS 기초][CSS - 타이포그래피(font-size,color,text-align)] (2) | 2021.11.19 |
| [CSS 기초][CSS - 선택자의 타입들] (0) | 2021.01.06 |
| [CSS 기초][CSS - HTML에 CSS 쓰기] (0) | 2021.01.06 |