[CSS] 선택자(Selector) - class, id, 우선순위

모든 요소(*)

: 모든 유형의 요소

css - * { 효과; }

* {
  color: red;
}

 

 

태그(tag) 이름

: html에서 사용하는 태그의 이름

html - <태그이름>
css - 태그이름 { 효과; }

h1 {
  font-family: cursive;
}

 

 

 

속성(attribute) 이름

: 특정 속성이 포함된 요소를 지정

css - [속성이름] { 효과; }

[href]{
   color: magenta;
}

 

• 특정 요소에서 특정 값을 가진 요소들에게 각각 다른 효과를 주고 싶다면,

css - 요소이름[속성이름*=값] { 효과; }

<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>

img[src*='winter'] {
  height: 50px;
}

img[src*='summer'] {
  height: 100px;
}

 

 

 

class (클래스)

: 특정 요소만 선택하고 싶을 때 사용

: css 효과가 필요한 부분을 하나로 묶기 위해 html 코드에 클래스 속성 추가

: 여러 개의 클래스 동시에 적용 가능(띄어쓰기로 구분)

: 태그보다 우선순위 높음

: css 에서 사용 시 클래스 이름 앞에 . 붙여야 함

html - <class="이름">
css - .클래스이름 { 효과; }

<style>
    .saw {
	    color:red;
    }
</style>
<h2 class="saw">CSS</h2>
<h2>JavaScript</h2>

 

 

id(아이디)

: class보다 우선순위가 높은 속성

: id의 이름은 단 한 번만 사용

: css 에서 사용 시 클래스 이름 앞에 # 붙여야 함

html - <id="이름">
css - #아이디이름 { 효과; }

<style>
    .saw {
	    color:red;
    }
    #ready {
    	color:blue;
    }
</style>
<h2 class="saw" id="ready">CSS</h2>
<h2 class="saw">JavaScript</h2>

 

 
선택자 우선순위

: id > class > tag (구체 > 포괄)

 

∴ 같은 class, id끼리는 가장 마지막에 있는 명령이 더 큰 영향력 가짐
=> 속성이 겹칠 때 css 코드 순서 바꾸면 결과 다르게 나옴