css 3. 선택자 종류

선택자 종류

 

class선택자

.saw {

       color : gray ;

       }

*class 속성 값에 여러개 값이 들어갈 수 있고,

              띄어쓰기로 인해 구분이 가능하다.

 

<a href = "2.html" class="saw active"> css </a>

*class선택자는 맨마지막에 등장한 class선택자가 우선순위를 가지고 있다.

 

.hero {

       background-image : url ("~") ;

       background-size : cover ;

        }

 

id선택자

해당 요소에만 넣고 싶은 디자인을 적용할 때 사용한다.

 

<a href = "1.html" id="active"> css </a>

 

#active {

           color : yellow ;

          }

 

선택자 우선순위

tag(element) < class < id < inline css

 

**class나 id가 selector일때 태그와 결합할 수 있다.

 

p {
  font-size: 20px;
}
.p-tag {
  color: gray;
}
#third-line {
  text-decoration: underline;
}

↓

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

첫 번째는 p태그이면서 p-tag 클래스이다.

두 번째는 p태그이면서 third-line 아이디이다.

라는 뜻이다.

 

**여러 selector를 사용할 수도 있다.

 

.pre span {
  background-color: yellow;
}

위의 css에서 최종적으로 적용되는 selector는 span이다.

selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것을 주목하자!