selector

김예찬·2021년 4월 11일
0

CSS의 selector라는 개념은 CSS뿐만 아니라, DOM을 선택하는 API querySelector()라는 함수에서도 사용되어 지기 때문에 꼭 알고 있어야 합니다. Selector에 대해 알아봅시다.😁

CSS 선택자

선택자라는 단어에서도 알 수 있듯, 선택해주는 요소입니다. 이를 통해 특정한 요소들을 선택하여 스타일을 적용할 수 있습니다.

선택자의 종류

알고 있어야 하는 선택자의 종류들을 소개합니다.

전체

* : 모든 태그를 선택

* {padding: 0}

tag

h1 {padding: 0} // 태그 이름을 통해 선택

class

<div class="imclass">이 태그를 선택</>
.imclass {padding: 0} // 클래스를 통해 선택

ID

<div class="imid">이 태그를 선택</>
#imid {padding: 0} // Id를 통해 선택

descendant

li a {
  text-decoration: none; // li 안에 있는 a 자손 태그 선택
}

가상 클래스

a:link { color: red; }
a:visted { color: purple; } //가상 클래스를 통해 선택

인접 선택자

ul + p {
   color: red;   // 앞의 요소 바로 뒤에 있는 요소만 선택
   		// 이 예시에선 p 태그가 폰트가 빨간색으로 변경
}

X > Y

div#container > ul {
  border: 1px solid black; // x 의 1depth에 있는 자식 요소 y만 선택
}

X ~ Y

ul ~ p {
   color: red;	// ul 아래에 있는 모든 p요소 선택
}

X[name]

a[name] {
   color: green; // 속성 선택자, name 속성이 있는 a 태그만을 선택
}

X[href="foo"]

a[href="https://net.tutsplus.com"] {
  color: #1f6053; // 속성과 속성의 값까지 일치하는 태그 선택
}

참고할 만한 사이트

이외에도 정말 많은 선택자들이 존재하지만, 잘 정리 되어 있는 사이트들이 많아서 링크로 걸어 놓겠습니다😎

profile
프론트엔드

0개의 댓글