CSS - id, class, selector, combinators

id

• id는 원칙적으로 하나의 객체에만 적용할 수 있다.

• id는 아래 코드처럼 #을 붙여 사용한다.

<div>
  <span id="test"> hello </span>
</div>
--------------------------------
#test {
  color: tomato;
}

class

• class는 여러 객체에 적용할 수 있다.

• class는 아래 코드처럼 .을 붙여 사용한다.

<div>
  <span class="test"> hello </span>
</div>
--------------------------------
.test {
  color: tomato;
}

Parent Selectors

• 태그이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용한다.

<style>
  div span {
  }		
</style>

---

• 태그 이름 뿐만 아니라 id와 class를 같이 사용할 수 있다.

<style>
  #test .box {
  }		
</style>

---

• 선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용 할 수 있다. AND 연산

<style>
  div.box {
  }
  div#test {
  }
  #test.box {
  }
</style>

---

• 쉼표를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수 있다. OR 연산

<style>
  div, .box {
  }
  .box, #test {
  }
</style>

---

Pseudo Selectors

:link - 방문한 적이 없는 링크

:visited - 방문한 적이 있는 링크

:hover - 마우스를 롤오버 했을 때

:active - 마우스를 클릭했을 때

:focus - 포커스 되었을 때 (input 태그 등)

:first - 첫번째 요소

:last - 마지막 요소

:first-child - 첫번째 자식

:last-child - 마지막 자식

:nth-child(2n+1) - 홀수 번째 자식

Combinators

div span {} - div 부모태그 밑의 모든 span 자식태그들을 지정한다.

div > span {} - div 부모태그 바로 밑의 span 자식태그를 지정한다.

div + span {} - div 태그와 같은 라인에 있는 span 태그를 지정한다.

div ~ span {} - div 태그와 같은 라인에 있지만 바로 뒤에 오지 않을 때의 span을 지정한다.