[CSS] 선택자

선택자

: 어떤요소에 스타일을 적용할 것인지에 대한 정보

선택자{ 
	속성명: 속성값;
    }

 

1. 기본선택자

 1) 전체선택자: HTML웹 문서를  구성하는 모든 요소

* {
	color: blue;
    }

 

 2) 태그선택자

p{
	color: blue;
    }

 

 3) 클래스 선택자 : 문서 내 class가 "text"인 모든요소 (.text의 '.'이 클래스를 의미함)

.text{
	color: blue;
    }

 

 4) 아이디 선택자 : 문서 내 id가 "topic"인 요소 (id는 고유한 식별자)

#topic {
	color: blue;
    }

 

2. 그룹선택자

: 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.

  쉼표(,) 를 이용해 선택자를 그룹화한다.

h1, p, div {
	color: blue;
    }

 

선택자가 겹치는 경우

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

 

선택자 우선순위?

아이디 선택자 > 클래스 선택자 > 태그 선택자