[CSS] CSS 선택자

💡기본 선택자

전체 선택자
모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다. 

* {
  color: green;
}

 

유형 선택자
노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.

a {
  color: red;
}

 

클래스 선택자
요소의 class 특성에 기반해 요소를 선택합니다.

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

<p class="red">빨간 글자색의 문단입니다.</p>
<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>

 

ID 선택자 
요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택합니다.

#identified {
  background-color: skyblue;
}

<div id="identified">특별한 ID를 가진 요소에요!</div>
<div>이건 그냥 div에요.</div>

 

 

💡 그룹 선택자 

여러 줄 묶기

#main,
.content,
article {
  font-size: 1.1em;
}

한줄로 묶기

h1, h2, h3, h4, h5, h6 { font-family: helvetica; }

 

💡 결합자

자손 결합자
보통 한 칸의 공백 문자로 표현하는 자손 결합자(" ")는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

Copy to Clipboard

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

Copy to Clipboard

 

 

 

자손 결합자

자식 결합자(>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.

CSS

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

Copy to Clipboard

HTML

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

 

나머지 결합자

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

 

 

 

---

출처: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors