11.Selectors

1. 요소,클래스,ID선택자(Type,class,ID selector)

• 요소 선택자 : 테그를 선택해서 꾸며주기 위한 선택자

• 클래스 선택자 : 클래스를 선택해서 꾸며주기 위한 선택자

  • 여러 테그에 같은 이름의 class를 선언 할수가 있다. 그래서 선택자 하나로 같은 이름의 클래스를 가진 선택자를 꾸밀수 있다.

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

  .box {
    width: 100px;
  }
  

  • 한 테그에 class 선언을 여러개 할수가 있다.

  <div class="box-0 box-1 box-2"></div>
  

  .box-0.box-1.box-2 {
    width: 100px;
  }
  

  • 주의할점(.box0.box-1 vs .box0 .box-1)

  .box0.box-1.box-2 {
  }
  <!-- 클래스가 .box0.box-1.box-2 인것을 선택한다.-->
  

  .box0 .box-1 .box-2 {
  }
  <!-- 클래스가 .box0의 자식요소 .box-1의 자식요소인 .box2 하나만 선택한다.-->
  

• ID 선택자

  • 무조건 하나의 이름을 가진 id만 선언할수 있다.

  <div id="yosup"></div>
  

  #yosup {
    width: 100px;
  }
  

2. 자식, 자손,형제 선택자

• 바로 아래의 자식들을 선택하는 방법

  <div>
    <strong></strong>
  </div>
  

  div > strong {
    background-color: red;
  }
  

• 자손(자식포함) 선택자를 선택하는 방법

  <div>
    <strong>
      <strong><strong>
    </strong>
  </div>
  

  div strong {
    background-color: red;
  }
  <!-- 자식인 strong과 자손인 strong 모두 선택됨 -->
  

• 형제 선택자들을 선택하는 방법(1) : 기준형제 다음에 오는 형제들을 선택하고 싶을때

  <div>
    <ol>
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="c">3</li>
      <li class="d">4</li>
      <li class="e">5</li>
    </ol>
  </div>
  

  .c ~ li {
    color: red;
  }
  <!-- 클래스 c 이후에 오는 형제 테그를 선택함 -->
  

• 주의할점

  .c ~ .e {
    color: red;
  }
  <!-- 클래스 e 만 선택됨  -->
  
  

• 형제 선택자들을 선택하는 방법(2) : 기준형제 바로 다음에 오는 형제 하나를 선택하고 싶을때

  <div>
    <ol>
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="c">3</li>
      <li class="d">4</li>
      <li class="e">5</li>
    </ol>
  </div>
  

  .c + li {
    color: red;
  }
  <!-- 클래스가 d 형제만 선택됨  -->
  

3. 구조적 가상 클래스 선택자

• 선택자의 첫번째 요소 (:first-child)

  <div>
    <ol>
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="c">3</li>
      <li class="d">4</li>
      <li class="e">5</li>
    </ol>
  </div>
  

  li:first-child {
   color: red;
  }
  <!-- li 선택자 중 첫번째 자식요소인 a 만 선택됨  -->
  

• 선택자의 마지막 요소 (:last-child)

  <div>
    <ol>
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="c">3</li>
      <li class="d">4</li>
      <li class="e">5</li>
    </ol>
  </div>
  

  li:last-child {
   color: red;
  }
  <!-- li 선택자 중 마지막 자식요소인 e 만 선택됨  -->
  

• 선택자중 내가 선택한 요소 (:nth-child)

  <div>
    <ol>
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="c">3</li>
      <li class="d">4</li>
      <li class="e">5</li>
    </ol>
  </div>
  

  li:nth-child(3) {
   color: red;
  }
  <!-- li 선택자들 중 3번째 li 만 선택됨  -->
  

  li:nth-child(2n) {
   color: red;
  }
  <!-- li 선택자들 중 2의 배수 번째인 li 가 선택됨  -->
  

4. 동적 가상 클래스 선택자

• element:hover : 마우스를 갖다 댓을때 상태를 표현함

  a:hover {
    background-color: red;
  }
  

• element:active : 마우스를 눌렀을때 상태를 표현함

  a:active {
    background-color: red;
  }
  

• element:focus : 요소에 포커스가 되었을때 발생함

  

  포커스의 생김새

  a:focus {
    border-color: red;
  }
  

5. CSS 선택자 올림픽

• 선택자 우선순위(갯수와 상관없이 금>은>동) !!

  • 금메달

    • id

  • 은메달

    • class

  • 구조적 가상 클래스( :fist-child , :last-child :nth-child )

  • 동메달

    • Type

• 예시

  #gnb.tab-nav {
  
  }
  <!-- 1 금메달, 1 은메달 -->
  
  

  header.main-header {
  
  }
  <!-- 1 동메달, 1 은메달 -->
  

  #gnb.tab-nav ul:last-child {
  
  }
  <!-- 1 금메달(id), 1 은메달(.class) , 1 동메달(ul) , 1 은메달(:last-child) -->
  

• Rule Break( 참고만 하고 , 지양하는 CSS 형태 !!)

  • 인라인에 선언된 CSS는 !important 다음으로 강력한 CSS , 외부에서 선언된 css를 다 이겨버림

  • !important 이 세상에서 제일 강력한 CSS

  * {
    color: red !important;
  }