css 셀렉터 문법(universal, type, id, class, state, attribute)

셀렉터(selector)란?

속성을 적용 할 부분을 지정하게 해주는 태그

 

 

• Universal (*) : 모든 요소를 지정한다.

* {color: green;}

 

 

• type (tag) : 특정 태그를 지정한다. 

li {color: blue;}

 

 

• ID(#id) : 특정 ID를 지정한다. 

#special {color: pink;}

 

 

• Class(.class) : 특정 Class 요소를 지정한다. 

.red {color: red;}

 

 

• State(:) : 특정 상태를 지정한다. ex)hover

button:hover {color: yellow; background: beige;}

 

 

• Attribute([]) : 주어진 특성의 존재여부나 값에 따라 요소를 지정한다. ex)a[href], a[class], a[title], 문자열

<!--링크의 컬러를 보라색으로 바꿔줌-->
a[href] {color: purple;}

<!--naver.com링크의 컬러를 보라색으로 바꿔줌-->
a[href="naver.com"] {color: purple;}

<!--naver로 시작하는 링크의 컬러를 보라색으로 바꿔줌-->
a[href^="naver"] {color: purple;}

<!--.com으로 끝나는 링크의 컬러를 보라색으로 바꿔줌-->
a[href$=".com"] {color: purple;}