css-1 : Selector(선택자)-1

Selector(선택자)-1

기본 & 그룹 선택자

* Html

  <h1>기본 & 그룹 선택자</h1>

  <span>
    span 요소
  </span>

  <p>
    p 요소
  </p>

  <p class="blue">
    p 요소, class는 blue
  </p>

  <span class="blue">
    span 요소, class는 blue
  </span>

  <p class="blue dark">
    p 요소, class는 blue와 dark
  </p>

  <p id="red">
    p 요소, class는 blue, id는 red
  </p>

*: 모든 요소 선택

* {
  font-weight: bold;
  color: darkorange;
  }

• 같은 선택자의 경우 뒤에 오는 것이 우선순위가 높음

* {
  color: plum;
  }

p: 태그 선택자

p {
  color: olivedrab;
  }

. : class 선택자

* 태그보다 우선순위가 높음

*페이지상의 여러요소가 같은 class를 가질 수 있음

* 다른 선택자에 이어붙일 수 있음

* 선택자는 구체적일수록 우선순위가 높음

p.blue {
  color: slateblue;
}
.blue.dark {
  color: mediumblue;
}
p.blue.dark {
  color: darkblue;
}

#: id선택자

#red {
  color: tomato;
}

* class보다 우선순위 높음

* id는 페이지상에서 요소마다 고유해야함!

, : 그룹 선택자

span, .dark, #red {
  text-decoration: underline;
}