CSS의 selector라는 개념은 CSS뿐만 아니라, DOM을 선택하는 API querySelector()라는 함수에서도 사용되어 지기 때문에 꼭 알고 있어야 합니다. Selector에 대해 알아봅시다.😁
선택자라는 단어에서도 알 수 있듯, 선택해주는 요소입니다. 이를 통해 특정한 요소들을 선택하여 스타일을 적용할 수 있습니다.
알고 있어야 하는 선택자의 종류들을 소개합니다.
*
: 모든 태그를 선택
* {padding: 0}
h1 {padding: 0} // 태그 이름을 통해 선택
<div class="imclass">이 태그를 선택</>
.imclass {padding: 0} // 클래스를 통해 선택
<div class="imid">이 태그를 선택</>
#imid {padding: 0} // Id를 통해 선택
li a {
text-decoration: none; // li 안에 있는 a 자손 태그 선택
}
a:link { color: red; }
a:visted { color: purple; } //가상 클래스를 통해 선택
ul + p {
color: red; // 앞의 요소 바로 뒤에 있는 요소만 선택
// 이 예시에선 p 태그가 폰트가 빨간색으로 변경
}
div#container > ul {
border: 1px solid black; // x 의 1depth에 있는 자식 요소 y만 선택
}
ul ~ p {
color: red; // ul 아래에 있는 모든 p요소 선택
}
a[name] {
color: green; // 속성 선택자, name 속성이 있는 a 태그만을 선택
}
a[href="https://net.tutsplus.com"] {
color: #1f6053; // 속성과 속성의 값까지 일치하는 태그 선택
}
이외에도 정말 많은 선택자들이 존재하지만, 잘 정리 되어 있는 사이트들이 많아서 링크로 걸어 놓겠습니다😎