CSS 선택자

Type 선택자  

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다.

예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

 

p {
  color: blue;
}

Id 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다.

예를 들어 다음은 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

#abc {
  color: red;
}

Class 선택자

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다.예를 들어 다음은 class 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

• 클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다.

.abc {
  color: red;
}

전체 선택자

전체 선택자(the Universal Selector)는 HTML의 모든 요소를 선택하는 기능입니다. 태그, 속성명, 속성값, 클래스, 아이디 등 모든 요소가 선택됩니다.

전체 선택자를 나타내는 기호는 * 입니다. * 모양의 기호는 CSS 뿐만 아니라 다른 프로그래밍 언어에서도 대부분 전체를 나타내는 경우가 많으므로 알고 있으면 유용합니다.

* {
  color: red;
}

하위 선택자

하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다.

예를 들어 다음은 div 요소의 하위에 있는 blockqoute 요소를 선택합니다.

 

<div>
  <blockquote>...</blockquote>
</div>


다음과 같을 때도 blockquote를 선택합니다.

<div>
  <aside>
    <blockquote>...</blockquote>
  </aside>
</div>

자식 선택자

자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다.

예를 들어 다음은 div 요소의 자식 요소 중 blockqoute를 선택합니다.

 

div > blockquote

주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉 다음과 같을 때는 blockquote를 선택하지만,

<div>
  <blockquote>...</blockquote>
</div>

다음과 같을 때는 blockquote를 선택하지 않습니다.


<div>
  <aside>
    <blockquote>...</blockquote>
  </aside>
</div>

인접 선택자

인접선택자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 요소만 선택합니다.

img + p {
  font-style: bold;
}

 

형제 선택자

형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다.

예를 들어 다음은 h1 요소의 형제 요소 중 p 요소를 선택합니다.

 

h1 ~ p

 

그룹 선택자

속성이 같은 선택자 그룹으로 묶어서 사용합니다.

 

.classname, #idname, tagname {
 속성: 속성값
}

 

속성 선택자

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다.

가상클래스 선택자

:empty

empty는 내용이 없는 비어있는 요소를 선택합니다.

예를 들어 다음은 li 요소 중 내용이 없는 것을 선택합니다.

li:empty

공백도 내용이 있는 것으로 봅니다. 따라서 다음처럼 빈 칸이 있는 것은 선택되지 않습니다.

<li> </li>

가상요소 선택자

 

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.

:first-line

::first-line은 요소의 첫 번째 줄을 선택합니다.

예를 들어 다음은 p 요소의 첫 번째 줄의 글자색을 빨간색으로 만듭니다.

 

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

 

종속 선택자

 

말 그대로 하나의 선택자에 종속 되었다.

종속이란 "태그 선택자 내부에 또 다시 클래스 선택자 or 아이디 선택자가 포함 되어 있는경우"를 말합니다.

 

<h1 class="logo"> ... </h1>

 

선택자의 우선순위

 

1. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.
2. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.
3. 선택자의 종류에 따른 우선 순위 규칙(1항보다 우선)
   1. 주요 단일 선택자 방식에서 id, class, tag 순의 우선 순위
   2. 우선 순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.
4. 결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선 순위를 정한다.