selector

selector는 html의 구체적인 요소를 타겟한다. 그 종류엔 다음 것들이 있다.

1. 요소선택자(특정 타입의 모든 HTML요소를 선택한다.)
   종종 tag name 이나 element selector 로 언급되며, < > 를 붙이지 않는다.

p {
 color: red;
 }

2. universal 선택자 : * , 어떤 타입이든 모든 요소를 타겟한다.
3. 클래스 선택자
   클래스는 재사용 될 수 있다.

.클래스 속성값 {
   text-transform: uppercase;
 }

클래스 속성값으로 한가지 이상의 값을 가질 수 있으며 이를 이용한 css응용도 가능하다.

4. id 선택자
   특정 요소를 독특하게 스타일링하고 싶다면 우리는 그 요소에 id를 부여하고 id속성을 이용하여 css를 적용시킬 수 있다.
   여러 값을 받아들이며 넓게 통용되는 class 와는 다르게, 한 요소의 id 는 오직 한가지 값만 가지며 페이지당 한번만 사용된다.

#아이디이름(id 속성값) {
}

5. 속성선택자

img[src*=''] {
color: magenta;
}

6. 수도(pseudo)클래스 선택자
   사용자가 특정한 행위를 하고 난 후의 달라진 상태를 나타낸다. 예를 들면 파란색 글자로 된 링크 방문 후에 링크 글자 색이 보라색으로 바뀌는 것, 마우스포인터가 p태그 위에서 맴돌때 선택

p:hover {
  background-color: lime;
}

• placeholder와 같은 의사 요소(Pseudo-Element)들의 스타일을 설정할 수 있다.
• placeholder::placeholder 의 글자색을 바꾸거나, 첫 번째 글자(::first-letter)만 크기를 키우거나, 첫 번째 줄(::first-line)의 줄간격을 바꿀 수 있다.

** ID 선택자가 가장 구체적인 선택자고 그 다음이 class 선택자, 그 다음이 type 선택자이다. 스타일을 쉽게 편집하려면 타입선택자를 사용하고 그게 안된다면 클래스 선택자, id선택자를 이용한다.

7. chaining
   두가지이상의 클래스선택자를 입력하여 더 구체적인 요소를 묶어 선택하여 스타일화 할 수 있다.

 <h2 class='destination heading-background'>3. Seoul, South Korea</h2>
 
 destination 을 클래스 값으로 갖는 h2를 선택하고자 할 때 
 
 h2.destination {
  font-family: Tahoma;
}

8. 자손 콤비네이터
   클래스 속성값(main-list)을 가진 요소의 자손요소(li) 선택

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

main-list를 클래스 값으로 갖는 요소의 자손요소(li)를 선택하고자 할 때 

.main-list li {
   color: blueviolet;
}

** 선택자가 여러개 붙을수록 선택자 구체성(specificity)이 증가하며 우선시된다.

  <li><h4 class='destination'>Jackson Hole, Wyoming</h4></li>
  
  li 요소 안에 있는 h2를 선택하고자 할 때
  
  li h4 {
  color: gold;
  }

** 콤마(,)를 이용하여 코드 반복 작성을 줄일 수 있다.(두가지 이상의 요소에 동일하게 적용된다.)

h5, li {
  font-family: monospace;
}