CSS selector

 

CSS: Cascading style sheet (연속 스타일 시트)

Author style : 개발자

User style : 사용자

Browser style : 브라우져

!important : Cascading 을 끊음, 쓰지 않는게 좋음

 

 

selectors( 선택자)

* : 모든 테그

Tag 이름 :

#id

.class

: state

[] attribute

 

selector{

property : value;

}

 

*{

color: green;

}

 

li{

color: blue;

}

 

#special{

color: pink;

}

 

li#special{ //li 의 special 만

color: pink;

}

 

.red{

width:100px;

height:100px;

background:yellow;

}

 

button:hover{ //마우스커서를 버튼에 올렸을때 빨강으로 바꿈

color: red;

background:beige;

}

 

a[href] { //앵커 테그중에 하이퍼레퍼런스가 있는것만 보라색으로

color:purple;

}

 

a[href="naver.com"] { //앵커 테그중에 하이퍼레퍼런스가 naver.com 인것만 보라색으로

color:purple;

}

 

a[href="naver"] { //앵커 테그중에 하이퍼레퍼런스가 naver로 시작하는것만 보라색으로

color:purple;

}

a[href$=".com"] { //앵커 테그중에 하이퍼레퍼런스가 .com으로 끝나는것만 보라색으로

color:purple;

}

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS reference - CSS: Cascading Style Sheets | MDN

Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes , pseudo-elements , data types , functional notations and at-rules . You can also browse key CSS concepts and a list of selectors organized by type . Also included is a brief DOM-CSS / CSSOM ...

developer.mozilla.org