주요선택자

전체선택자

* {스타일;}

type selector

해당 태그 모두 적용되므로 보기 쉽게 상단에 정리하는게 편하다.

태그{스타일;}

ID selector

id는 중복이 안되며 유일해야한다.

#idname{스타일;}

Class sclector

여러개의, 원하는 곳마다 적용하고 싶을 때 사용
캐스캐이팅 원칙에 의해 여러개의 셀렉터를 쓰면 마지막에 쓴 코드를 따라간다.

.이름{스타일;}
.이름, .이름{스타일;}  // , = and

예를 들어

<div class="box bd-box">box1</div>
<div class="box bg-box">box2</div>

가 있다고 하자.

.box.bd-box{스타일;}   // 여러클래스를 가지고 있는 요소를 한번에 쓸때

.box {
  스타일;
  &.bd-box{
    스타일;
  }
  &.bg-box{
    스타일;
  }
}
// box를 가지고 있는 클래스들 쓸때

속성 선택자

[attr], [attr=value]

[attr] : a 태그 중 target 속성이 있는 것만 바꾸고 싶을 때
[attr=value] : a 태그 중 href 속성이 있는 것 중에 해당 value만 style 적용

[attr^], [attr$], [attr_]

[attr^] : value 시작하는 부분을 쓰면 거기에 해당하는 태그들의 스타일이 바뀜
[attr$] : value 끝부분만 써도 거기에 해당하는 태그들의 스타일이 바뀜
[attr_] : 중간의 하나. 중간에 단어만 써도 스타일이 바뀜