🎨CSS 선택자 2
CSS 파일 연결하기
<link> : 외부에 있는 파일과 연결하는 태그
<head>
<link href="css/selector2.css" rel="stylesheet">
</head>CSS 파일은 파일 전체가 <style>태그 내부라고 생각하면 됨
rel : 어떤 시트를 연결하는지
기본 속성 선택자
- 태그에 작성된 특정 속성을 선택하는 선택자
⭐작성법⭐
선택자[속성명="속성값] {css 코드 ;}
💡 참고
1) 선택자는 생략할 수 있다
2) "속성값" 양쪽에 쌍따옴표("")는 홑따옴표('')로 변경할 수 있다.
<!--HTML-->
<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>/*CSS*/
/* 기본 속성 선택자 */
div[name="name-1"] {
background-color: red;
}
/* div 중에 name속성을 name-1로 갖고 있는 것 선택 */
p[name="name-1"]{
background-color: green;
}
/* div태그의 name="2"인 것과 p태그의 name="2"인 것 모두 선택 */
[name="name-2"] {
background-color: blue;
} 
자식 선택자
- 지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
⭐작성법⭐
선택자1 > 선택자2 {css 코드 작성 ; }
- 선택자1 : 부모 요소 선택 (반드시 필요)
- 선택자2 : 자식 요소 선택 (반드시 필요)
<!--HTML-->
<ul id="parent-ul"> 부모
<li>자식1 </li>
<li>
<span>자식2</span>
</li>
<li>자식3 </li>
<li>
<span>자식4</span>
</li>
</ul>/*css*/
/* 자식 선택자 */
/* # : id 선택자 */
/* parent-ul이라는 id속성을 가진 부모 태그 아래 li태그들 */
#parent-ul > li {
background-color: orange;
}
/* parent 아래에 li아래에 span 아래에 있기 때문에 안됨
바로 하위에 존재해야 함
parent-ul > span{
background-color: red;
} */
/* parent 아래에 li 아래에 span 형식으로 해줘야 한다 */
#parent-ul > li > span {
background-color: red;
}
후손(자손) 선택자
- 지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자
👉 바로 아래, 아래의 아래 등 모두 포함
⭐작성법⭐
선택자1 선택자2 {css코드 ; } - 선택자1 : 부모(조상) 요소 선택자
- 선택자2 : 후손 요소 선택자
<!--HTML-->
<div id="test-div">
<p>test-div의 자식 요소입니다</p>
<p>test-div의 후손 요소입니다</p> <!--자식이면서 후손요소-->
<div>
<p>나도 후손일까?</p> <!--맞다!-->
</div>
</div>/*CSS*/
/* 후손 선택자 */
#test-div p {
background-color: yellowgreen;
}
/* test-div id를 가진 div 태그 아래의 모든 p태그 */
💡div 태그 아래에 있는 다른 div 태그 또한 후손임을 알 수 있음
반응 선택자
- 사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자
(마우스 오버, 클릭 유지...) - 요소를 클릭하고 있는 경우 (
:active) - 요소에 마우스가 올라가는 경우 (
:hover)
<!--HTML-->
<div class="div-cls" id="active-test">:active 테스트</div>
<div class="div-cls" id="hover-test">:hover 테스트</div>/*CSS*/
/* 반응 선택자 */
.div-cls {
border : 1px solid black;
width: 200px;
height: 200px;
background-color: gray;
/* 아래쪽 요소와의 간격 */
margin-bottom: 30px;
/* 요소의 마우스 커서가 올라오면 손가락 모양으로 변경 */
cursor: pointer;
}
#active-test:active {
background-color: yellow;
}
#hover-test:hover {
background-color: pink;
width: 230px;
height: 230px;
}
/* #hover-test요소가 변화를 일으키면 0.5초 동안 변해라 */
#hover-test {
transition-duration: 0.5s ;
}<:active>
<:hover>
상태 선택자
- 입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
:focus: 요소에 초점이 맞춰졌을 때
👉 입력하려고 클릭해둔 상태
:checked: 요소가 체크되었을 때 (radio, checkbox)
enabled / disabled: 요소가 사용 가능한 / 불가능한 상태일 때
<!--HTML-->
<h4>:focus</h4>
<input 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>enabled / disabled</h4>
<div id="test-div2">
사용 가능 : <input enabled><br>
사용 불가능 : <input disabled>
</div> /* CSS */
#focus-test:focus {
background-color: red;
}
input[name="fruits"]:checked {
width: 30px;
height: 30px;
background-color: red;
}
#test-div2 > input:enabled {
background-color: lightgreen;
}
#test-div2 > input:disabled {
background-color: lightcoral;
}
💡radio, checkbox는 크기를 제외한 스타일은 적용되지 않는다
동위 선택자
-
동위 관계 (동등한 위치 == 형제 관계)에서
뒤(다음)에 위치한 요소를 선택하는 선택자
A
B
B
(ABB는 모두 형제 관계)⭐작성법⭐
1) A선택자 + B선택자 {css 코드 ;}
➡️ A 바로 뒤(다음)에 있는 B 하나를 선택 (+)2) A선택자 ~ B선택자 {css 코드 ;}
➡️ A 뒤에 있는 모든 B 요소를 선택 (~ 틸드)
<!--HTML-->
<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>/*CSS*/
/* 동위 선택자 */
#div1 + div {
background-color: olive;
}
/* div1 뒤에 있는 div 하나만 */
#div3 ~ div {
background-color: blue;
}
/* div3 뒤에 나오는 모든 div 태그 */
