CSS 선택자
선택자 2번째 시간
기본 속성 선택자
태그에 작성된 특정 속성을 선택하는 선택자
( id,class 속성도 선택이 가능하지만 하지만 보통 #, . 을 사용함 )
[작성법]
선택자[속성명="속성값"] {css 코드 ;}참고
- 선택자는 생략할 수 있다.
-> 특정 속성을 가진 모든 요소 선택 - "속성값" 양쪽의 쌍따옴표("")는 홑따옴표('')로 변경 가능하다.
div[name="name-1"]{
background-color: red;
}
[name="name-2"] {
background-color: blue;
}
p[name="name-1"]{
background-color: green;
}
/* 자식 선택자 */
#parent-ul > li {
background-color: orange;
}
/* 자식에 자식 */
#parent-ul > li > span{
background-color: red;
}
#test-div p{
background-color: yellow;
}<div name="name-1">div1</div>
<div name="name-1">div2</div>
<div name="name-2">div3</div>
<div name="name-2">div4</div>
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>
자식 선택자( > )
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택지2 CSS코드
- 선택자1 : 부모 요소 선택(반드시 필요)
- 선택자2 : 자식 요소 선택(반드시 필요)/* 자식 선택자 */
#parent-ul > li {
background-color: orange;
}
/* 자식에 자식 */
#parent-ul > li > span{
background-color: red;
}<ul id ="parent-ul"> 부모
<li>자식1</li>
<li>
<span>자식2</span>
</li>
<li>자식3</li>
<li>
<span>자식4</span>
</li>
</ul>후손(자손) 선택자 ( (띄어쓰기) )
지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자 1 선택자 2 {CSS 코드;}
- 선택자1 : 부모(조상) 요소 선택자
- 선택자2 : 후손 요소 선택자#test-div p{
background-color: yellow;
}<div id = "test-div">
<p>test-div의 자식 요소입니다.</p>
<p>test-div의 후손 요소입니다.</p>
<div>
<p>나도 후손일까?</p>
</div>
</div>
반응 선택자
사용자의 움직임에 반응하여 스타일이 달라지는 선택자 (마우스 오버, 클릭 유지..)
- 요소를 클릭하고 있는 경우 ( :active )
- 요소에 마우스가 올라가는 경우 ( :hover )
.div-cls{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: #ddd;
/* 아래쪽 요소와의 간격 */
margin-bottom: 30px;
/* 요소에 마우스 커서가 올라가면 손가락 모양으로 변경 */
cursor: pointer;
}
/* 클릭하고 있을때만 반응하는 active */
#active-test:active {
background-color: yellow;
}
#hover-test:hover {
background-color: pink;
width: 230px;
height: 230px;
}
/* 요소가 변화를 일으키면 0.5초동안 변해라 */
#hover-test {
transition-duration: 0.5s;
}<div class="div-cls" id="active-test">: active 테스트</div>
<div class="div-cls" id="hover-test">: hover 테스트</div>
윗 사진은 클릭 상황, 밑 사진은 마우스 커서가 올라가 있는 상황
상태 선택자
입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
focus -> 요소에 초점이 맞춰졌을 때
:checked -> 요소가 체크 되었을 때 (radio, checkbox)
:enable / disable
-> 요소가 사용 가능한/불가능한 상태일 때
/* 요소에 초점이 맞춰졌을 때 (:focus) */
#focus-test:focus {
background-color: blueviolet;
}
/* 요소가 체크 되었을 때 (:checked) */
input[name="fruits"]:checked {
width: 30px;
height: 30px;
background-color: red;
/* radio, checkbox는
크기를 제외한 스타일 적용되지 않음.
*/
}
/* 사용 가능/불가능 (:enabled/disabled) */
#test-div2 > input:enabled {
background-color: lightgreen;
}
#test-div2 > input:disabled {
background-color: lightcoral;
}<h4>:focus</h4>
<input type="text" id="focus-test">
<h4>:checked</h4>
<label>사과
<input type="checkbox" name="fruits">
</label><br>
<label>바나나
<input type="checkbox" name="fruits">
</label><br>
<label>멜론
<input type="checkbox" name="fruits">
</label><br>
<h4>:enable / :disable</h4>
<div id="test-div2">
사용 가능 : <input type="text" enabled> <br>
사용 불가능 : <input type="text" value="변경하면 안되는 값" disabled>
</div>
동위 선택자
동위 관계(동등한 위치 == 형제 관계)에서 뒤(다음)에 위치한 요소를 선택하는 선택자.
A
B
B
- A 바로 뒤(다음)에 있는 B 요소 하나를 선택 (+)
A선택자 + B선택자 { CSS 코드 ; } - A 뒤에 있는 모든 B요소를 선택 (~ 틸드(Tilde))
A선택자 ~ B선택자 { CSS 코드 ; }
#div1 + div {
background-color: olive;
}
#div3 ~ div {
background-color: brown;
}<div id="div1">1번 입니다.</div>
<div>2번 입니다.</div>
<div id="div3">3번 입니다.</div>
<div id="div4">4번 입니다.</div>
<p>관련 없는 태그입니다.</p>
<div id="div5">5번 입니다.</div>
dudu