Selector 란?

CSS를 통하여 스타일을 지정하려는 HTML의 element를 대상으로, selector를 사용하여 CSS의 스타일 선언을 특정 페이지의 element와 연결한다.

4개의 기본 selector는 element, .class, #id 그리고 *이 있다.

Element selectors

element selector는 이름으로 HTML 요소를 선택한다.

<p>My paragraph</p>

CSS를 사용하여 <p> element를 선택하고, 원하는대로 스타일을 지정할 수 있다.

p {
  color: red;
}

위 코드는 해당 페이지의 모든 p 태그를 대상으로 한다. 따라서 복수 단락이있는 경우 모두 빨간색으로 변경된다.

Classes & ID’s

모든 HTML element에는 스타일을 특정 element에 연결할 때 일반적으로 사용하는 두 가지 속성, 즉 class와 id가 있다.

HTML 문서 내에서 동일한 class 값이 여러 element에서 반복 될 수 있다.
반면 id는 한 번만 사용할 수 있다.
따라서 2개 이상의 특정 class 이름을 가진 element를 선택해야 할 때 class를 사용한다.

CSS에서는 class를 나타내기 위해 마침표 (.) 기호를 접두어로 사용하고, id의 경우 해시 (#) 기호를 사용한다.

<p class="city">
  busan
</p>
<p id="city">
  seoul
</p>

.city {
  color: blue;
}
#city {
  color: red;
}

id selector는 엄격하고 재사용을 허용하지 않는다. 가능하면 먼저 HTML5 element의 태그 이름 또는 pseudo-class를 사용하는게 좋다.

Universal Selector

별표 (*)는 모든 요소를 선택한다.

* {
    background-color: yellow;
    margin: 0;
    padding: 0;
}

div * {
    background-color: red;
}

참고로 상용계 코드에서는 불필요한 가중치가 추가되기에 권장되지 않는다.

다중 selector 연결하기

class 또는 id로 특정 element 타겟팅

class 또는 id를 가진 특정 element를 대상으로 타켓팅 할 수 있다.
이를 위해 element 다음에 ".class" 또는 "#id" 를 추가하기만 하면 된다.

<p class="city">
  busan
</p>
<p id="city">
  seoul
</p>

p.city {
  color: blue;
}
p#city {
  color: red;
}

다중 class 타겟팅

element에 2개 이상의 클래스가 있는 경우, 공백없이 "."으로 구분 된 클래스 이름을 결합하여 선택할 수 있다.

<p class="city seoul">
  seoul
</p>

.city.seoul {
  color: red;
}

class / id 결합 타겟팅

특정 element 타겟팅 처럼, class와 id를 붙여서 선언하면 된다.

<p class="city" id="seoul">
  seoul
</p>

.city#seoul {
  color: red;
}

다중 selector 그룹화

selector를 결합하여 여러 selector에 동일한 선언을 적용 할 수도 있다. 간단히 쉼표로 구분하면 된다.

<p>
  내가 사는 곳 :
</p>
<span class="city">
  Seoul
</span>

p, .city {
  color: red;
}

문서 계층 구조

문서 계층 구조에 따라 여러 항목을 결합하여, 보다 구체적인 selector를 만들 수 있다.

<p> 태그 안에 <span> 태그가 중첩되는 것은 매우 일반적이다. <p> 태그에 중첩되지 않은 <span> 태그에 스타일을 적용하지 않고, 중첩된 범위만 타겟팅하도록 선택할 수 있다.

<span>
  안녕하십니까.
</span>
<p>
  제가 사는 도시는
  <span class="city">
    Seoul
  </span>
  입니다.
</p>

p span {
  color: red;
}

단 이 경우, <span>의 깊이에 상관 없이 모두 적용된다.
만약 1 depth 수준에서만 선택되도록 하려면, 다음과 같이 ">" 기호를 사용해야 한다.

따라서 이 경우는 <p> element의 1 depth가 아닌 경우 스타일이 적용되지 않는다.

<p>
  <span>
    red
  </span>
  <strong>
    <span>
      not red
    </span>
  </strong>
</p>

p > span {
  color: red;
}

동일한 depth에 특정 element가 앞에있는 경우에도 선택이 가능하다. "+" 연산자를 사용하면 된다. 그러면 바로 앞 <p> element에 빨간색이 할당된다.

<p>city will be red</p>
<span>busan is red</span>    
<span>seoul is not red</span>

p + span {
  color: red;
}

sibling selector로 작업 할 때 "~" 연산자를 사용할 수 있다. "+"와 같이 첫 번째 요소뿐만 아니라 모든 형제 요소를 선택한다.

<p>city will be red</p>
<span>busan is red</span>    
<span>seoul is red</span>

p ~ span {
  color: red;
}