Selector

전체 선택자

모든 요소 선택

*{
	margin: 0;
}

요소(Tag) 선택자

HTML의 태그명을 선택하여 스타일 적용

body {
	background-color: #ffc;
}	

클래스 선택자

클래스명(.)을 선택하여 스타일 적용

.like {
	color: green;
}

아이디 선택자

아이디명(#)을 선택하여 스타일 적용

#lion{
	color: blue;
}

속성 선택자

속성의 유무나 속성 값의 조건에 따라 스타일 적용

[title] {
	color: purple;
}

/* href가 https://로 시작하는 a태그 */
a[href^="https://"]{
	text-decoration: none;
}

/* href가 pdf로 끝나는 a태그 */
a[href$="pdf"]{
	background-color: violet;
}

가상 클래스 선택자

선택자에 추가하는 키워드, 선택한 요소가 특별한 상태일 때 선택하여 스타일 적용

/* 아직 방문하지 않은 링크 */
a:link{
  color: black;
}

/* 방문한 링크 */
a:visited{
  color: olive;
}

/* 해당 요소에 커서를 올렸을 때 */
a:hover{
  color: blue;
}

/* 해당 요소에 키보드 포커스가 맞춰졌을 때 */
a:focus{
  color:aqua;
}

/* 해당 요소가 활성화 되었거나 클릭 되었을 때 */
a:active{
  background-color: #fff;
}

가상 요소 선택자

선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일 적용

/* 선택된 요소의 첫 번째 자식 요소(가상 요소) 생성 */
/* h1 요소 앞에 "멋사"라는 요소 생김 */
h1::before{
  content: "멋사";
}

/* 선택된 요소의 마지막 자식 요소(가상 요소) 생성 */
/* h1 요소 뒤에 "멋사"라는 요소 생김 */
h1::after{
  content: "13기";
}

CSS 우선순위(Specificity)

하나의 요소에 여러의 스타일이 Cascade(계단식) 된 경우, Specificity(명시도)가 높은 선택자의 스타일이 적용

• "A" 는 아이디 선택자의 명시성 값 -> 선택자에 구성에 id가 사용된 횟수
• "B" 는 클래스 선택자의 명시성 값 -> 선택자에 class가 사용된 횟수
• "C" 는 요소 선택자와 가상 요소의 명시성 값 -> 선택자에 요소와 가상 요소가 사용된 횟수
• 전체 선택자는 명시성 값을 가지지 않는다.
• 부정 선택자(name(:not)) 안에 포함된 선택자는 다른 선택자와 같은 방법으로 명시성 계산,
  부정 선택자 자체는 예외적으로 명시성 값을 가지지 않는다.(:not, :is, :where 등)
• 가상 요소는 명시성이 요소 선택자와 같고 가상 클래스는 클래스 선택자와 명시성이 같다.
• 결합자나 선택자 그룹은 명시성에 영향을 끼치지 않는다.
• 최종 명시성 값은 A-B-C의 숫자를 연속으로 나열한 값으로, 이 숫자 값이 클수록 우선순위가 높다.
  -!important 규칙이 스타일 선언에 사용된 경우 다른 선언보다 우선
• 명시도(Specificity)
  - 인라인 스타일: 1,0,0,0
  • ID 선택자: 0,1,0,0
  • 클래스/속성/가상 클래스: 0,0,1,0
  • 요소/가상 요쇠 0,0,0,1