Simple

Table of contents

1. Name
2. ID
3. Class
4. Universal
5. Grouping

Simple Selectors

Name

based on the element name

p {
  color: red;
}

ID

html의 id 속성을 사용, (#으로 연결)

▸ higher specificity than attribute selectors

▸ case-sensitive

▸ JavaScript can access an element with a specified id by using the getElementById()

#para1 {
  color: red;
}

!Note

Class

html의 class 속성을 사용, (.으로 연결)

▸ 태그 이름과 같이 만들어진 경우 (body.main) 해당 태그(body)에 제한됨

▸ case-sensitive

▸ JavaScript can access elements with a specified class name by using the getElementsByClassName()

.center {
  color: red;
}

!Note

Difference Between Class and ID

Universal

selects all HTML elements

* {
  color: blue;
}

Grouping

,를 사용해서 동일한 CSS 묶기

h1, h2 {
  color: blue;
}

선택자 우선순위