전산에서는 부모, 자식이라는 비유를 많이 씁니다.
위에 있는 것과 아래에 있는 것 or 포함 하는 것과 포함 되는 것들의 관계를 부모, 자식이라고 표현합니다.
클래스, 아이디, 태그 선택자만으로는 섬세한 작업을 하지 못하는 경우들이 있기 때문에
그것들을 기본으로 해서 조금 더 복합적으로 조합해서 아주 정교한 선택을 할 수 있게 해줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: red;
}
/* 띄어쓰기로 자식 선택자를 선택 할 수 있다. */
#lecture > li {
border: 1px solid red;
}
/* 직계 자손에만 css를 주고 싶을 때는 >를 사용한다. */
ul,
ol {
background-color: powderblue;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>
CSS
<ol>
<li>selector</li>
<li>declatarion</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 가상 클래스 선택자 (0) | 2022.01.21 |
|---|---|
| [생활코딩] 선택자 공부 팁 (0) | 2022.01.20 |
| [생활코딩] 선택자의 종류 : 클래스 선택자 (0) | 2022.01.19 |
| [생활코딩] 선택자의 종류 : 아이디 선택자 (0) | 2022.01.19 |
| [CSS] @keyframes 사용하기 (0) | 2022.01.18 |
댓글