[CSS] Selector: class, id

[강의 출처] opentutorials.org/course/3086/18329

CSS 선택자를 스스로 알아내는 방법 - 생활코딩

---

Cascading: 선택자(Selector) 우선순위

• id > class > tag(element)

 

class

• (코드 작성자가) 텍스트들을 어떤 의도에 따라서 그룹화할 때 쓰는 선택자(Selector)

• 다른 태그에 class="class이름" 형태로 삽입

• 한 태그에 여러 class 중첩이 가능하며, 띄어쓰기로 구분

• 여러 class가 중첩된 경우, <style> 태그에서 제일 아래에 나오는 class가 최종 적용 (덮어쓰기처럼)

• <style> 태그에서 효과 지정시 .class 형태로 입력

 

id

• class보다 우선순위가 높은 선택자 (class와 중첩되면  id의 효과 선언을 따름)

• 한 페이지에 한 id 선택자는 단 1번만 사용가능

• 다른 태그에 id="id이름" 형태로 삽입

• <style> 태그에서 효과 지정시 #id 형태로 입력

 

<style>
  a {
      color:black;
      text-decoration:none;
  }
  #activeid {                  /* id 앞에 붙은 "#"이 activeid가 id의 이름임을 의미 */
      color:green;             /* 순서상 saw보다 앞에 있더라도 id 효과 우선 적용 */
  }
  .active {              /* active 앞에 붙은 '.'이 active가 class의 이름임을 의미 */
      color:red;         /* '.'이 없다면 saw를 태그로 인식하여 적용되지 않음 */
  }
  .saw {                 /* 순서상 active보다 뒤에 있으므로 */
      color:gray;        /* class="saw active"처럼 중첩된 경우 saw 효과가 적용 */
  }
</style>

<a href="1.html" class="saw">HTML</a>         <!-- class="saw"는 아직 HTML의 영역임 # gray -->
<a href="2.html" class="saw active">CSS</a>   <!-- saw, active 2개의 class가 부여  # gray -->
<a href="3.html" class="saw" id="activeid">JS</a>   <!-- class와 id가 부여        # green -->			

 

<style> minor tricks :)

1. 여러 태그에 같은 효과를 주고 싶다면 아래처럼 쉼표로 구분해서 한번에 적용 가능

<style>
  h1, a {
   border-width:5px;
   border-color:red;
   border-style:solid;
  }
</style>

 

2. 같은 계열 Property의 Value라면 아래처럼 표현 가능, Value의 순서는 중요하지 않음 (아래 코드는 위의 1번 코드와 동일함)

<style>
  h1, a {
  border:5px solid red;
  }
</style>