/* CSS영역 (스타일정보 바로 기입) */
/* 1. 속성선택자 -------------------*/
/*div중 name속성값이 name1과 "일치"하는 요소*/
div[name=name1] {
background-color: orangered;
}
/*div중 name속성값에 name1이 "포함"되어있는 요소(단어로써)*/
div[name~=name1]{
background-color: yellow;
}
/*div중 class속성값이 class로 "시작"되는 요소(-앞에 한 단어로써)*/
div[class|=class]{
background-color: turquoise;
}
/*div중 name속성값이 na로 "시작"되는 요소*/
div[name^=na]{
background-color: blue;
}
/*div중 class속성값이 ss로 "끝"나는 요소*/
div[class$=ss]{
color: white;
}
/*div중 class속성값에 i가 "포함"되어있는 요소*/
div[class*=i]{
background: yellow;
color: red;
}
/*응용: class속성값이 div-class인 애들 중 name속성값에 name3가 포함되어있는 요소*/
.div-class[name~=name3]{
background: pink;
}
/* 2. 자손선택자와 후손선택자 ------------------------ */
/* a>b : a요소의 자손들 중에서 b요소들만을 선택*/
/* 아이디가 test1인 요소의 자손들 중 h4요소들만 선택*/
#test1>h4{
background: orangered;
}
#test1>ul>li{
background: darkcyan;
}
/* a b : a요소의 후손(모든 하위요소)들 중에서 b요소들만 선택 */
#test1 li{
color: red;
background: darkorange;
}
/* 3. 동위선택자 --------------------------------------- */
/* a+b : a요소 뒤에 b요소 하나만을 선택*/
#test2+div{
background: yellow;
}
#test2+ul{
background: pink;
}
/* a~b : a요소 뒤에 모든 b요소 다 선택*/
#test2~div{
/*background: green;*/
}
#test2~ul{
background: deeppink;
}
/* 4. 반응선택자 ------------------------------- */
.area{
background: yellowgreen;
width: 100px;
height: 100px;
cursor: pointer;
}
#active-test:active{
background: yellow;
color: red;
}
#hover-test:hover{
background: maroon;
color: white;
}
/* 5. 상태 선택자 ------------------------------------- */
/*기본적으로 해당 선택된 요소 자체에 스타일 반영*/
input[type=checkbox]:checked{
width: 20px;
height: 20px;
/*font-size: 20px; 제대로 반영안됨*/
}
input[type=checkbox]:checked+label{
font-size: 20px;
}
input[name^=user]:focus{
background: pink;
}
input[name^=user]:disabled{
background: red;
}
input[name^=user]:enabled{
background: blue;
}
button:enabled{background: cadetblue;}
button:disabled{background: darkgoldenrod;}
CSS
복사
