[CSS] 02_기타 선택자
CSS의 기타 선택자에 대해 알아보자
외부 스타일 방식
외부 스타일 방식: 스타일 정보만을 따로 관리하는 .css 외부 문서를 만들고 link 태그를 이용하여 연결시켜 주는 방법
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 선택자</title>
<!--
외부 스타일 방식: 스타일 정보만을 따로 관리하는 .css 외부 문서를 만들고
link 태그를 이용하여 연결시켜 주는 방법
-->
<link href="resources/css/02_stylesheet.css" rel="stylesheet">
<!-- link: 외부 파일을 연결해 주겠다
rel: 어떠한 방식으로 연결하겠다 -->
</head>👉🏻 head 영역에 link 코드 작성 후 진행할 것
1. 속성 선택자
스타일을 부여하고자 하는 요소 내에 작성되어 있는 속성을 이용해서 선택하는 방법
👉🏻 선택자 뒤에 []를 이용해서 속성과 속성값을 추가 조건으로 제시해서 선택하는 방법
[ 표현법 ]
선택자[속성=속성값] { => "일치"
선택자[속성~=속성값] { => "포함" (단어 기준, 띄어쓰기 기준)
선택자[속성|=속성값] { => "시작" (-로 구분된 단어 기준)
선택자[속성^=속성값] { => "시작" (일반 문자열 기준)
선택자[속성$=속성값] { => "끝" (일반 문자열 기준)
선택자[속성*=속성값] { => "포함" (일반 문자열 기준)
}
스타일속성명 : 값;
스타일속성명 : 값;
}
공통 영역
<!-- 02_기타선택자.html -->
<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name3">div4</div>
1) div 태그들 중에서도 name 속성값이 name1과 "일치" 하는 요소
/* 02_stylesheet.css*/
div[name=name1] {
background-color: orangered;
}
2) div 태그들 중에서도 name 속성값에 name1이 "포함"되어 있는 요소 (단어로써)
/* 02_stylesheet.css*/
div[name~=name1] {
background-color: yellow;
}
3) div 태그들 중에서도 class 속성값이 div로 "시작"되는 요소 (- 앞에 한 단어로써)
/* 02_stylesheet.css*/
div[class|=div] {
background-color: cyan;
}
4) div 태그들 중에서도 name 속성이 na로 "시작"되는 요소
/* 02_stylesheet.css*/
div[name^=na] {
background-color: blue;
}
5) div 태그들 중에서도 class 속성이 ss로 "끝나는" 요소
/* 02_stylesheet.css*/
div[class$=ss] {
color: white;
}
6) div 태그들 중에서도 class 속성값에 i가 "포함"되어 있는 요소
/* 02_stylesheet.css*/
div[class*=i] {
background-color: yellow;
color: red;
}
7) 응용: class 속성값이 div-class인 애들 중에서도 name 속성값에 name3이 포함되어 있는 요소들
/* 02_stylesheet.css*/
.div-class[name~=name3] {
background-color: pink;
}
2. 자손 선택자와 후손 선택자
자손 👉🏻 바로 하위인 요소들
후손 👉🏻 하위 요소들 전부 (자손도 포함)
[ 표현법 ]
*자손선택자 (>)
a>b {
스타일속성명 : 값;
}
* 후손선택자 ( )
a b {
스타일속성명 : 값;
}
<!-- 02_기타선택자.html -->
<div id="test1">
<h4>div의 자손이면서 후손입니다.</h4>
<h4>div의 자손이면서 후손입니다.</h4>
<ul>div의 자손이면서 후손입니다.
<li>나는 ul의 자손이면서 div의 후손입니다.</li>
<li>나는 ul의 자손이면서 div의 후손입니다.</li>
</ul>
</div>
👉🏻 a>b: a 요소의 자손들 중에서 b 요소들만 선택하겠다.
1) id 속성값이 test1인 요소의 자손들 중에서 h4 태그만 선택
/* 02_stylesheet.css*/
#test1>h4 {
background-color: orangered;
}
2) id 속성값이 test1인 요소의 자손들 중에서 ul 태그의 자손 중에서 li 태그만 선택
/* 02_stylesheet.css*/
#test1>ul>li {
background-color: darkcyan;
}
/* 경로 타고 들어가기 가능! */👉🏻 a b: a 요소의 후손 (모든 하위요소)들 중에서도 b요소들만 선택하겠다.
1) id 속성값이 test1인 요소의 모든 후손들 중에서 li 태그들만 선택
/* 02_stylesheet.css*/
#test1 li {
color: red;
}
3. 동위 (같은 레벨) 선택자
👉🏻 동위 관계 (같은 레벨이며, 내 뒤)에 있는 특정 요소를 선택할 때 사용
[ 표현법 ]
* a 요소 뒤에 있는 b 요소 "하나만"을 선택
a+b {
스타일속성명 : 값;
}
* a 요소 뒤에 있는 "모든" b 요소를 선택
a~b {
스타일속성명 : 값;
}
<!-- 02_기타선택자.html -->
<div id="test2">div</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul요소</ul>
<div>안녕</div>
👉🏻 a+b: a 요소 뒤에 b 요소 "하나만"을 선택하겠다.
1) id 속성값이 test2인 요소의 뒤에 있는 div 요소 하나만을 선택
/* 02_stylesheet.css*/
#test2+div {
background-color: yellow;
}
2) id 속성값이 test2인 요소의 뒤에 있는 ul 요소 하나만을 선택
/* 02_stylesheet.css*/
#test2+ul {
background-color: pink;
}
/* 바로 뒤의 요소가 아니기 때문에 반영 안 됨! */
👉🏻 a~b: a 요소 뒤의 모든 b 요소들을 선택하겠다.
1) id 속성값이 test2인 요소 뒤의 모든 div 요소들을 선택
/* 02_stylesheet.css*/
#test2~div {
background-color: green;
}
2) id 속성값이 test2인 요소 뒤의 모든 ul 요소들을 선택
/* 02_stylesheet.css*/
#test2~ul {
background-color: pink;
}
4. 반응 선택자
👉🏻 사용자의 움직임에 따라 선택이 되거나 안 되는 선택자
[ 표현법 ]
* 해당 요소에 클릭이 되었을 경우에만 스타일 부여
선택자:active {
스타일속성명 : 값;
}
* 해당 요소에 마우스가 올라가는 순간 스타일 부여
선택자:hover {
스타일속성명: 값;
}
<!-- 02_기타선택자.html -->
<div id="active-test" class="area">active 테스트</div>
<br>
<div id="hover-test" class="area">hover 테스트</div>/* 02_styleshhe.css 공간 분리를 위해 하단 작업 후 진행 */
.area {
background-color: yellowgreen;
width: 100px;
height: 100px;
}
👉🏻 active: 마우스가 클릭되었을 때 선택하겠다.
1) id 속성값이 active-test인 요소에 마우스가 클릭되었을 때 선택
 |
 |
| 기존 | 클릭 시 (마우스 버튼을 떼는 순간 스타일도 풀림) |
/* 02_styleshhe.css */
#active-test:active {
background-color: yellow;
color: red;
}
👉🏻hover: 마우스가 올라가는 순간에 선택하겠다
1) id 속성값이 hover-test인 요소에 마우스가 올라갈 때 선택
|
 |
| 기존 | 마우스를 올렸을 때 |
/* 02_styleshhe.css */
#hover-test:hover {
background-color: maroon;
color: white;
cursor: pointer;
}
/* 캡처에는 나오지 않지만 cursor: pointer; 속성을 주면
손가락 모양으로 커서가 바뀜 */
5. 상태 선택자
👉🏻 요소의 상태에 따라서 선택되는 선택자
(예를 들면 체크가 되었다거나, 선택이 되었다거나, 초점이 맞춰졌다거나, ...)
[ 표현법 ]
1) checked (체크됨) 상태의 요소
선택자:checked {
스타일속성명: 값;
}
<!-- 02_기타선택자.html -->
<input type="checkbox" id="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana">
<label for="banana">바나나</label>
<input type="checkbox" id="kiwi">
<label for="kiwi">키위</label>
👉🏻 :checked: 체크된, 선택된 상태에만 선택하겠다.
1-1) input 태그들 중에서 type 속성값이 checekd인 요소들 중에서도 체크된 애들만 선택
 |
 |
| 기존 | 체크박스 선택했을 때 |
input[type=checkbox]:checked {
width: 20px;
height: 20px;
font-size: 20px; /* 오직 checkbox에 대한 설정이기 때문에 글꼴 크기는 바뀌지 않음 */
}
1-2) 체크 박스가 체크될 때 글자 크기도 20px로 같이 변경하고 싶다면: 동위선택자 응용 (+)
|
 |
| 기존 | 체크박스 선택했을 때 |
input[type=checkbox]:checked+label {
font-size: 20px;
}
/* 이 코드를 추가해 주면 됨 */
[ 표현법 ]
2) 초점 (focus)이 맞춰진 input 요소 선택
선택자:focus {
스타일속성명: 값;
}
<!-- 02_기타선택자.html -->
아이디: <input type="text" name="userId" placeholder="아이디를 입력하세요" required>
<br>
비밀번호: <input type="password" name="userPwd" maxlength="15" required>
<br>
👉🏻 :focus : 초점이 맞춰진 요소를 선택하겠다.
1-1) input 태그들 중에서 name 속성값이 user로 시작하는 요소들 중에서 초점이 맞춰진 요소만 선택
/* 02_stlyesheet.css */
input[name^=user]:focus {
background-color: pink;
}
[ 표현법 ]
3) 활성화(enabled) 되어 있는 요소들 선택
선택자:enabled {
스타일속성명: 값;
}
4) 비활성화(disabled) 되어 있는 요소들 선택
선택자:disabled {
스타일속성명 : 값;
}
<!-- 02_기타선택자.html -->
아이디: <input type="text" name="userId" placeholder="아이디를 입력하세요" required disabled>
<br>
비밀번호: <input type="password" name="userPwd" maxlength="15" required>
<br>
<!-- 코드 활용을 위해 아이디에도 disabled 속성을 걸어 놓음 -->
<button>클릭가능</button> <!-- button 기본값: enabled-->
<button disabled>클릭불가능</button>
👉🏻 :enbled / :disabled: 활성화 / 비활성화된 요소들을 선택하겠다.
1) input 태그들 중에서 name 속성값이 user로 시작하는 요소들 중에서 비활성화된 요소만 선택
/* 02_stlyesheet.css */
input[name^=user]:disabled {
background-color: red;
}
2) input 태그들 중에서 name 속성값이 user로 시작하는 요소들 중에서 활성화된 요소만 선택
/* 02_stlyesheet.css */
input[name^=user]:enabled {
background-color: blue;
}
3) button 태그들 중에서 활성화된 버튼만 선택
/* 02_stlyesheet.css */
button:enabled { background-color: fuchsia;}
4) button 태그들 중에서 비활성화된 버튼만 선택
/* 02_stlyesheet.css */
button:disabled { background-color: indigo;}