전체, 태그 선택자
<style>
body {
border: 1px solid #9b0707;
/* bd */
}
div {
}
ul {
list-style: none;
}
h1 {
font-weight: 400;
}
* {
font-family: sans-serif;
/* ff */
font-style: italic;
/* fs */
}
</style>
해당 태그 전체에 스타일을 입력하는 코드이다.
클래스, 아이디 선택자
<style>
#apple {
background: #14a043;
color: rgb(208, 0, 255);
}
.orange {
background: #db1866;
font-style: italic;
}
.big {
font-size: 1.5em;
/* fsz1.5e */
font-weight: 700;
/* fw700 */
}
.hilight {
text-shadow: 2px / 2px / 5px yellow;
/* ts2/2/5 */
}
</style>
<div id=""></div> 부분의 id 는 css 에서 #을 붙여서 입력한다. 마찬가지로 클래스는 .을 앞에 붙여서 사용한다.
일치 선택자
<style>
li.orange {
background: orange;
}
span.orange {
background: rgb(61, 35, 255);
}
li#apple.green {
color: yellowgreen;
}
h1.yellow.low#change.primary {
background: violet;
}
</style>
li는 li태그를 의미하며 따라서 li#apple.green은 li태그이며 apple 이란 id 를 갖고 green이란 class를 가진 것을 의미한다. 이것을 일치 선택자 라고 한다.
자식 선택자
<style>
/*
자식, 후손, 형제 선택자
- 가장 마지막 선택자가 타겟이고
앞에는 전부 조건이다.
*/
div > .orange {
background: orange;
}
body > div > ul > #apple {
color: red;
}
#circle>h1.title>.leftlow>#banana{
}
/* 위에 복사해서 body에 탭키로 간단히 입력가능 */
</style>
body> div > ul > #apple은 body의 자식이며 div의 자식이고 ul의 자식인 apple이란 아이디를 가진 것을 의미한다.
후손선택자
<style>
body div em {
background: skyblue;
}
/*
자식, 후손, 형제 선택자
- 가장 마지막 선택자가 타겟이고
앞에는 전부 조건이다.
*/
/* div 다음 띄어쓰기가 후손선택자 즉, div의 후손전부 */
div .orange {
background: orange;
}
body div ul {
list-style: none;
}
</style>
body div ul 은 body안의 div안의 ul의 내용을 타켓팅 하고 있는 것이다.
중요한 것은 자식선택자 보다 후손 선택자가 개발에 유리하다는 것이다.
형제 선택자
<style>
/* 클래스 orange의 동생을 출력 */
.orange + li {
color: orangered;
}
/* 첫번째 tr빼고 전부 */
tr + tr {
}
li + li {
font-style: italic;
list-style: none;
font-weight: 700;
border: 1px solid #000;
}
/* 형이 li인 li */
.red ~ li {
background: yellow;
}
h1, h2, h3, h4, h5, h6 {
font-size: 16px;
text-wrap: 400px;
margin: 0;
padding: 0;
}
.apple #fox,
div > div.tiger,
.banana {
}
</style>
형제 선택자는 조건상의 주변을 타켓팅 하고 있다. 가장 오른쪽에 있는 것이 타겟이 된다.
속성선택자
<style>
[type=password] {
color: red;
/* c tap */
width: 100px;
/* w 100 tap */
}
input[:checked] {
}
div.apple #lion[value=1234] {
}
[disabled] {
opacity: 0.3;
}
</style>
type 또는 value 값을 대괄호를 사용해 입력해준다