CSS 02. 기타 선택자 (2)

3. 동위( 같은레벨) 선택자

동위같계에 있는 뒤에 위치한 특정요소를 선택할 때 사용  

- a 요소 바로 뒤에 있는 b요소 "하나" 만을 선택 
 a+b{스타일 속성 : 값};

-a 요소 뒤에있는 "모든" b요소 선택
a~b{ 스타일 속성 : 값};

<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul</ul>
<div>안녕</div>

<style>
#test2+div{background-color: gold;}
#test2+ul{background-color: seagreen;} /*제대로 선택안됨(바로뒤에있지 않기때문)*/

div~ul{background-color: seagreen;}
</style>

div1

div2

div3

div4

ul

안녕

 

 

---

4. 반응 선택자 

사용자의 움직임에 따라 선택되는 선택자 

- 해당요소에 클릭이 되는 순간 스타일 부여
 선택자 : active { 스타일속성 : 값; }

- 해당 요소에 마우스가 올라가는 순간 스타일 부여
 선택자: hover { 스타일속성 : 값; }

 <div id="active-test" class="area">active테스트</div>
<br><br>
 <div id="hover-test" class="area">hover테스트
<button>클릭</button></div>

<style>
.area{
    background-color: forestgreen;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

#active-test:active{
    background-color: firebrick;
    color:white;
}

#hover-test:hover>button{
    background-color: maroon;
    color: aliceblue;
}
</style>

active테스트

hover테스트

 

 

---

5. 상태 선택자 

요소의 상태에 따라서 선택되는 선택자 

 

- 초점(focus) 이 맞춰진 요소들에 스타일 부여하고자 할때
선택자 : focus{ 스타일 속성:값;}

- 활성화(enable) 되어있는 요소들에 스타일 부여하고자할때
선택자 : enble{ 스타일속성 : 값;}

- 비활성화(disable)되어있는 요소들에 스타일 부여고자할 때 
선택자 : disable{ 스타일속성: 값;}

아이디 : <input type="text" name="userId"> <br>
비밀번호 : <input type="password"name="userPwd" disabled><br><br>

<button>클릭가능</button>
<button disabled>클릭불가능</button>

<style>
input[name^=user]:focus{
    background-color: yellow;
}
button:enabled{background-color:royalblue;}
:disabled{background-color: tomato;}
</style>

아이디 :
비밀번호 :

 

- 체크된 상태의 요소에 스타일을 부여하고자 할때
 선택자 : checked {스타일속성 : 값;}

<input type="checkbox"id="apple">
<label for="apple">사과</label>

<input type="checkbox" id="banana">
<label for="banana">바나나</label>

<style>
input[type=checkbox]:checked{
    width:20px;
    height:20px;
    /*font-size:20px;제대로 반영 안됨 => 현재 input뒤에있는 label에 반영*/
}
input[type=checkbox]:checked+label{
    font-size: 20px;
}
</sytle>

사과 바나나