[CSS] 기타 선택자
컴퓨터/CSS<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="resources/css/03.style.css" rel="stylesheet">
<title>기타선택자</title>
</head>
<body>
<h2>1. 속성 선택자</h2>
<p>
선택하고자 하는 요소내에 작성되어있는 속성을 이용하여 선택하는 방법<br>
선택자 뒤에 []를 이용하여 속성과 속성값을 제시하면서 선택
</p>
<pre>
선택자[속성=속성값] { 스타일속성:값 } => 속성값이 "일치"하는 요소
선택자[속성~=속성값] { 스타일속성:값 } => 속성값에 단어가 "포함"되어있는 요소(공백으로 구분, 단어로써)
선택자[속성|=속성값] { 스타일속성:값 } => 속성값에 단어로 "시작"하는 요소(-로 구분, 단어로써)
선택자[속성^=속성값] { 스타일속성:값 } => 속성값으로 "시작"하는 요소
선택자[속성$=속성값] { 스타일속성:값 } => 속성값으로 "끝"나는 요소
선택자[속성*=속성값] { 스타일속성:값 } => 속성값이 "포함"되어 있는 요소
</pre>
<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="name4">div4</div>
<br>
<hr>
<h2>2. 자손선택자 후손선택자</h2>
<p>
요소들이 중첩되어 작성 가능
자손 : 바로 하위인 요소들
후손 : 하위요소들 전부
</p>
<pre>
* 자손선택자 : >
a>b {
스타일속성:값;
}
* 후손선택자 : 공백
a b {
스타일속성:값;
}
</pre>
<div id="test1">
<h4>div의 자손이면서 후손입니다</h4>
<h4>div의 자손이면서 후손입니다</h4>
<ul>div의 자손이면서 후손입니다
<li>ul의 자손이면서 div후손입니다</li>
<li>ul의 자손이면서 div후손입니다</li>
</ul>
</div>
<br>
<hr>
<h2>3. 동위(같은레벨) 선택자</h2>
<p>
동위관계(같은레벨)에 있는 뒤에 위치한 특정 요소를 선택할 때
</p>
<pre>
* a요소 뒤에 있는 b요소 "하나만" 선택
a+b {
스타일속성:값;
}
* a요소 뒤에 있는 모든 b요소 선택
a~b {
스타일속성:값;
}
</pre>
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul</ul>
<div>div5</div>
<br>
<hr>
<h2>4. 반응 선택자</h2>
<p>
사용자의 움직임에 따라 선택되는 선택자
</p>
<pre>
* 해당 요소에 클릭이 되었을 경우 스타일 부여
선택자:active {
스타일속성: 값;
}
* 해당 요소에 마우스가 올라가는 순간 스타일 부여
선택자:hover {
스타일속성: 값;
}
* 링크 태그에서 방문하기 전의 스타일 부여
선택자:link {
스타일속성: 값;
}
* 링크 태그에서 방문하기 후의 스타일 부여
선택자:visit {
스타일속성: 값;
}
</pre>
<div id="active-test" class="area">active테스트</div>
<br><br>
<div id="hover-test" class="area">hover테스트</div>
<br><br>
<a id="link" href="https://naver.com" target="_blank">네이버로 이동</a>
<hr>
<h2>5. 상태 선택자</h2>
<p>
요소의 상태에 따라 선택되는 선택자
</p>
<pre>
1) 체크된(checked) 상태의 요소내에
선택자:checked {
스타일속성:값;
}
</pre>
<input type="checkbox" id="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana">
<label for="banana">바나나</label>
<br><br>
<pre>
2) 초점(focus)가 맞춰진 input요소 선택
선택자:focus {
스타일속성:값;
}
</pre>
아이디 : <input name="userId">
<br>
비밀번호: <input type="password" name="userPwd">
<br><br>
<pre>
3) 활성화(enabled) 되어 있는 요소들 선택
선택자:enalbed {
스타일속성:값;
}
4) 비활성화(disabled) 되어 있는 요소들 선택
선택자:disalbed {
스타일속성:값;
}
</pre>
<button>클릭가능</button>
<button disabled>클릭불가능</button>
<br><br>
<hr>
<h2>6. 일반 구조 선택자</h2>
<p>
특정한 위치에 있는 태그를 선택되는 선택자 (일반적으로 자손, 후손선택자의)
</p>
<pre>
:first-child -> 형제 관계 태그 중 첫번째 태그 선택
:last-child -> 형제 관계 태그 중 마지막 태그 선택
:nth-child(수열) -> 형제 관계 태그 중 수열번째 태그 선택
:nth-last(수열) -> 형제 관계 태그 중 뒤에서 수열번째 태그 선택
</pre>
<div id="summer">
<p>여름1</p>
<p>여름2</p>
<p>여름3</p>
<p>여름4</p>
<p>여름5</p>
</div>
<br><br>
<hr>
<h2>7. 형태 구조 선택자</h2>
<p>
특정한 위치에 있는 태그를 선택되는 선택자 (태그별로 구분)
</p>
<pre>
:first-of-type -> 형제 관계 태그 중 첫번째 위치한 특정한 태그 선택
:last-of-type -> 형제 관계 태그 중 마지막에 위치한 특정한 태그 선택
:nth-of-type(수열) -> 형제 관계 태그 중 수열번째 위치한 특정한 태그 선택
:nth-last-of-type(수열) -> 형제 관계 태그 중 뒤에서 수열번째 위치한 특정한 태그 선택
</pre>
<div id="fall">
<div>div1</div>
<p>가을1</p>
<p>가을2</p>
<p>가을3</p>
<div>div2</div>
<p>가을4</p>
<p>가을5</p>
<div>div3</div>
</div>
<br><br>
<hr>
<h2>8. 부정 선택자</h2>
<p>
특정 선택 요소를 제외한 나머지 요소들의 스타일 적용
</p>
<pre>
요소:not(선택자)
</pre>
<div id="winter">
<p>겨울1</p>
<p>겨울2</p>
<p>겨울3</p>
<p>겨울4</p>
<p>겨울5</p>
</div>
</body>
</html>
<CSS>
/* =================== 1. 속성 선택자 ================= */
/* div요소들 중 name속성값이 name1과 "일치"하는 요소 */
div[name=name1] {
background-color: rgb(255, 225, 169);
}
/* div요소들 중 name속성값이 name1이 "포함"하는 요소(공백으로 구분, 단어단위로) */
div[name~=name1] {
color:red;
}
/* div요소들 중 class속성값이 class로 "시작"하는 요소*/
div[class^=class] {
background-color: aquamarine;
}
/* div요소들 중 class속성값이 class로 "시작"하는 요소(단어단위로 -로 구분)*/
div[class|=class] {
color:blueviolet;
}
/* div요소들 중 class속성값이 ss로 "끝"하는 요소*/
div[class$=ss] {
font-size: 20px;
}
/* div요소들 중 class속성값이 i를 "포함"하는 요소*/
div[class*=i] {
border : 1px dotted ;
}
/* 응용 : class속성값이 div-class인 요소들 중에서 name속성값이
name3이 포함(단어로)되어 있는 요소에 배경색 스타일 적용*/
.div-class[name~=name3] {
background-color: plum;
}
/* ============= 2. 자손 선택자와 후손 선택자 =========== */
/* id가 test1인 요소의 자손들 중 h4요소만 선택 */
#test1>h4 {
background-color: orange;
}
/* ul의 자손 요소들 선택 */
#test1>ul>li {
background-color: beige;
}
/* id가 test1인 요소의 후손들 중 li 요소 선택 */
#test1 li {
color: rgb(75, 2, 144);
}
/* =================== 3. 동위 선택자 ================= */
/* id가 test2인 형제들 중 바로 뒤에 나오는 div 요소 하나만 */
#test2+div {
background-color: aquamarine;
}
#test2+ul {
background-color: yellow; /* 선택안됨(바로 뒤의 요소가 아니기 때문)*/
}
/* id가 test2인 형제들 중 ul 요소들 모두 선택 */
/* #test2~div {color:rgb(176, 3, 41)} */
#test2~ul {color:rgb(176, 3, 41)}
/* =================== 4. 반응 선택자 ================= */
.area {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
#active-test:active {
background-color: rgb(83, 2, 158);
color: white;
}
#hover-test:hover {
background-color: orchid;
color: white;
}
a#link:link {color: aquamarine;}
#link:hover {color: green;}
#link:active {color: blueviolet;}
#link:visited {color: tomato;}
/* =================== 5. 상태 선택자 ================= */
input[type=checkbox]:checked {
width: 30px;
height: 30px;
}
/* 체크박스가 선택되면 글자도 커지게 스타일지정 */
input[type=checkbox]:checked+label {
font-size: 30px;
}
input[name^=user]:focus {
background-color: pink;
}
button:enabled {
background-color: rgb(188, 125, 248);
}
button:disabled {
background-color: yellowgreen;
}
/* =================== 6. 일반 구조 선택자 ================= */
#summer>:first-child {
background-color: lightgray;
}
#summer :last-child {
background-color: lightpink;
}
#summer :nth-child(2) {
background-color: lightcyan;
}
#summer :nth-child(2n) { /* 짝수번째 */
color: blue;
}
#summer :nth-child(2n+1) { /* 홀수번째 */
color: red;
}
/* =================== 7. 형태 구조 선택자 ================= */
/* 첫번째는 div인데 p태그로 잘못 기재했다고 인식 안됨.
first-child : 첫번째가 중요. 태그는 중요하지 않음
first-of-type : 태그 중요 */
/* #fall p:first-child {
background-color: lightgray;
} */
#fall p:first-of-type {
background-color: lightgray;
}
#fall p:last-of-type {
background-color: lightcoral;
}
#fall p:nth-of-type(3) {
background-color: lightgreen;
}
#fall p:nth-of-type(2n) {
color: blueviolet;
}
#fall p:nth-of-type(2n+1) {
color: rgb(43, 174, 226);
}
/* =================== 8. 부정 선택자 ================= */
#winter :not(p:first-child) {
color: darkorange;
}
'컴퓨터 > CSS' 카테고리의 다른 글
| [CSS] 텍스트 관련 스타일 (0) | 2024.06.27 |
|---|---|
| [CSS] 글꼴 관련 스타일 (0) | 2024.06.27 |
| [CSS] 선택자 우선순위 (0) | 2024.06.27 |
| [CSS] 기본 선택자 (0) | 2024.06.26 |
| [CSS] hello CSS (0) | 2024.06.26 |
