Selector

※ CSS : Cas Cade (폭포처럼 흐르다. -> 위에서 아래 흐름으로 스타일이 적용된다)

 

1. Type Selector: 태그 선택자.

div {
  width: 100px;
  height: 58px;
  background-color: red;
}

 

2. class selector: 클래스 선택자

- 여러 태그에 동일한 스타일을 적용하고 싶을 때 사용합니다.

- 한 요소에 여러 클래스를 가질 수 있습니다.

/* html */
<div class="box-1 box-2 box-3">
  <!--...-->
</div>

/* CSS */
.box-1 {} /* class="box-1" */

.box-1.box-2 {} /* class="box-1 box-2" */

 

3. ID Selector : 아이디 선택자

- 단 한개만 존재해야 한다. 똑같은 이름의 id는 존재하면 안된다.

#box-1 {} /* id="box-1" */

.box-1#box {} /* class="box-1" id="box"*/

 

---

 

4. Child Selector : 자식 선택자

- parent > child 로 사용한다.

<section>
  <h1></h1>
  <ul>
    <li>
      <h1></h1>
    </li>
  </ul>
</section>

<!-- section의 자식은 h1, ul -->
<!-- section의 자손은 li, h1 -->

<!-- CSS -->
section > h1 {}

 

5. Descendant Selector : 자손 선택자

- parent descendant 로 사용한다.

- 공백을 사용한다. (모든 자손 중 해당하는 자손에 적용된다.)

- 이때 자손에 자식도 포함이므로 자손, 자식 다 적용하고 싶을 때 사용한다.

 

6. Sibling Selector : 형제 선택자

- parent ~ sibling : parent 다음에 오는 모든 자식들

- parent + sibling : parent 다음에 오는 자식 한 개

<section>
  <h1></h1>
  <ul>
    <li></li>
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</section>

<!-- h1과 ul은 형제 -->
<!-- li과 li은 형제 -->

<!-- CSS -->
.active ~ li {}  //class="active" 다음에 오는 모든 형제
.active + li {}  //class="active" 다음에 오는 형제 1개

 

---

 

7. Structural Pseudo-classes : 가상 클래스 선택자(1)

- first-child : 첫 번째 자식 요소

- last-child : 마지막 자식 요소

- nth-child(n) : 자식 중 n번째 

<section>
  <h1></h1>
  <ul>
    <li></li>
    <li></li>
  </ul>
</section>

li:first-child {}
li:last-child {}

li:nth-child(1) {}

 

---

 

8. User Action Pseudo-classes : 가상 클래스 선택자(2)

- selector:hover : 마우스를 가져다 댔을 때 활성화 된다. 대표적으로 <a>에 많이 사용된다.

- selector:focus : 대표적으로 <input>에 사용된다. 커서가 갔을 때 활성화 된다.

- selector:active : 마우스로 클릭을 했을 때 잠깐 활성화 된다.

<section>
  <h1></h1>
  <ul>
    <li></li>
    <li>
      <a href="#"></a>
    </li>
    <li>
      <input type="text" />
    </li>
  </ul>
</section>

a:hover {}

a:active {} //찰나에 적용된다.

input[type="text]:focus {} //집중됐을 때