[CSS] CSS 선택자 종류 5가지 정리

1. 기본

1.1 전체 선택자  (Universal Selector)

모든 요소를 선택 (*)

* {
  color: royalblue;
}

1.2 태그 선택자 (Type Selector)

태그 이름으로 선택 (태그이름)

li {
  color: royalblue;
}

1.3 클래스 선택자 (Class Selector)

클래스 속성 값으로 선택 (.클래스이름)

.box {
  color: royalblue;
}

1.4 아이디 선택자 (ID Selector)

아이디 속성 값으로 선택 (#아이디이름)

#profile {
  color: royalblue;
}

 

2. 복합 (Combinator)

2.1 일치 선택자 (Basic Combinator)

선택자 두개 이상을 동시에 만족하는 요소 선택 (선택자선택자)

<span id="name">maple</span>

span#name {
  color: royalblue;
}

2.2 자식 선택자 (Child Combinator)

어떤 선택자의 자식 요소를 선택 (선택자1 > 선택자2)

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li class="cherry">Cherry</li>
</ul>

ul > .cherry {
  color: cherry;
}

2.3 후손 선택자 (Descendant Combinator)

어떤 선택자의 하위 요소를 선택 (선택자1 선택자2)

<div id="container">
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li class="color-green">Cherry</li>
  </ul>
  <div>Carrot</div>
  <p>Tomato</p>
  <span class="color-green">Cucumber</span>
</div>

.container .font-green {
  color: green;
}

2.4 인접 형제 선택자 (Adjacent Sibling Combinator)

어떤 선택자 다음 형제 요소를 선택 (선택자 + 선택자)

<ul>
  <li>Apple</li>
  <li class="banana">Banana</li>
  <li>Cherry</li>
</ul>

.banana + li {
  color: royalblue;
}

2.5 일반 형제 선택자 (General Sibling Combinator)

어떤 선택자 다음 형제 요소 모두를 선택 (선택자 ~ 선택자)

<ul>
  <li>Apple</li>
  <li class="banana">Banana</li>
  <li>Cherry</li>
  <li>Carrot</li>
  <li>Tomato</li>
  <li>Cucumber</li>
</ul>

.banana ~ li {
  color: royalblue;
}

 

3. 가상 클래스 (Pseudo-classes) (선택자:)

3.1 선택자:hover

해당 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 (선택자:hover)

a:hover {
  color: royalblue;
}

3.2 선택자:active

해당 선택자 요소에 마우스가 클릭되는 동안 선택 (선택자:active)

a:active {
  color: royalblue;
}

3.3 선택자:focus

해당 선택자 요소에 포커스가 되면 선택 (선택자:focus)

input:focus {
  color: royalblue;
}

3.4 선택자:first-child

해당 선택자가 형제 요소 중 첫째라면 선택 (선택자:first-child)

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container p:first-child {
  color: royalblue;
}

3.5 선택자:last-child

해당 선택자가 형제 요소 중 마지막이라면 선택 (선택자:last-child)

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container span:last-child {
  color: royalblue;
}

3.6 선택자:nth-child(n)

해당 선택자가 형제 요소 중 n번째라면 선택

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container *:nth-child(2) {
  color: royalblue;
}

3.7 선택자:nth-child(2n)

n에는 숫자 0부터 입력되므로 0, 2, 4.. 번째 즉 짝수번째 선택

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container *:nth-child(2n) {
  color: royalblue;
}

3.8 선택자:nth-child(2n+1)

n에는 숫자 0부터 입력되므로 1, 3, 5.. 번째 즉 홀수번째 선택

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container *:nth-child(2n+1) {
  color: royalblue;
}

3.9 선택자:not(선택자)

해당 선택자가 아닌 요소 선택

<div id="container">
  <p>Tomato</p>
  <p>Cilantro</p>
  <p>Celery</p>
  <span>Cucumber</span>
</div>

#container *:not(span) {
  color: royalblue;
}

 

4. 가상 요소 선택자 (Pseudo-elements)

4.1 선택자::before

해당 선택자 요소 내부 앞에 내용(content) 삽입

<div class="box"></div>

.box::before {
  content: '앞';
}

4.2 선택자::after

해당 선택자 요소 내부 뒤에 내용(content) 삽입

<div class="box"></div>

.box::after {
  content: '뒤';
}

4.3 선택자::first-letter

해당 선택자 요소 안에 있는 글자 중 첫 글자만 선택

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum sit praesentium exercitationem. Nam delectus quasi consequatur sunt rem, fuga soluta! Itaque perspiciatis deserunt iure aspernatur assumenda velit rem dolorum praesentium!</p>

p::first-letter {
  color: royalblue;
}

4.4 선택자::first-line

해당 선택자 요소 안에 있는 글자 중 첫줄만 선택

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum sit praesentium exercitationem. Nam delectus quasi consequatur sunt rem, fuga soluta! Itaque perspiciatis deserunt iure aspernatur assumenda velit rem dolorum praesentium!</p>

p::first-line {
  color: royalblue;
}

 

5. 속성 (Attribute Selector)

5.1 [속성]

해당 속성을 포함한 요소를 선택

<input type="text" disabled></input>
<input type="password"></input>

[disabled] {
  color: royalblue;
}

5.2 [속성="값"]

해당 속성의 값을 포함한 요소를 선택

<input type="text" disabled></input>
<input type="password"></input>

[type="password"] {
  color: royalblue;
}