Selector

① Type Selector

html 태그를 선택하는 selector

<div> CSS </div>
<p> Selector </p>

div {
  background-color: blue;
}
p {
  color: #ffaaaa;
}

② Class Selector

<div class="class_selector_name"></div>

.selector_name {
	property: value;
}

👩‍💻 참고) class 선택자는 여러개 쓸 수 있다(단, 띄워써야한다!)

<div class="box1 box2 box3"></div>

.box1 .box2 .box3 {} /*  띄워서 사용할 경우 아예 다른 선택자이다. */
.box1.box2 {} /* 붙여서 사용할 경우 같은 선택자로 본다, .box1이면서 .box2인 것*/

③ ID Selector

식별자, 유일한 값을 나타낼 때 사용

<div class="id_selector_name"></div>

#id_selector_name {
	property: value;
}

④ Child Selector(자식 선택자)

parent > child

<div class="parent">
  <ul class="child>
    <li></li>
    <li></li>
  </ul>
</div>

.parent > .child {}

⑤ Descendant Selector(자손 선택자)

parent descendant

<div class="parent">
  <ul class="child>
    <li></li>
    <li></li>
  </ul>
</div>

.parent li {}

⑥ Sibling Combinators Selector(형제 선택자)

(1) parent + sibling

.active + li {
 /* active다음에 오는 li (하나만선택) */
}

(2) parent ~ sibling

.active ~ li {
 /* active 클래스다음에 오는 모든 li들을 뜻함 (다중선택) */
}

---

선택자 우선순위

① 나중에 선언된것이 이전에 선언 된 것을 덮는다.

p {
  color: blue;
}
p {
  color: pink;
}
/* color: pink;가 적용된다. */

② ID selector > class selector, pseudo-class(가상클래스) > 요소선택자(html태그자체를사용) 순으로 우선순위가 높아진다.

👩‍💻 참고1) inline-style은 ②번의 선택자들보다 제일 우선으로 적용되기 때문에 정말 급할때말고는 쓰지말자!
👩‍💻 참고2) property: value !important;은 inline-style도 이기는 우선순위가 강한녀석으로 정말 급할때말고는 쓰지말자!

---

Pseudo-classes(가상클래스)

① Structural Pseudo-classes(구조적 가상클래스 선택자)

(1) element:first-child
(2) element:last-child
(3) element:nth-child(n)

<section>
  <h1>구조적 가상클래스 선택자</h1>
    <ol>
      <li>첫번째</li>
      <li>두번째</li>
      <li>세번째</li>
      <li>네번째</li>
      <li>다섯번째</li>
      <li>여섯번째</li>
   </ol>	
</section>

li:first-child {
  color: red;
}
li:last-child {
  color: blue;
}
li:nth-child(4) {
  color: yellow;
}

② User Action Pseudo-classes(동적 가상클래스 선택자)

(1) element:hover - 마우스가 위에 올라갔을 때
(2) element:focus - 마우스가 선택되고나서
(3) element:active - 마우스가 클릭했을 때

<section>
  <h1>동적 가상클래스 선택자</h1>
  <input type="email" placeholder="Enter Your Email" />
  <button type="submit">보내기</button>
</section>

button:hover {
  background-color: #9c27b0;
}
button:active {
  background-color: #c2185b;
}
input:focus {
  border-color: #1e88e5;
}