CSS : Selector(선택자) 3
2023. 3. 13. 14:22ㆍHTML, CSS
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<style>
/* ------------------------------------------------- */
/* 가상 클래스와 가상 요소 */
/* - 코드 상에 표현하기 힘든 클래스와 요소를 의미 */
/* - 앞의 선택자들로 선택하기 어려운 요소들을 선택 */
/* n 번째 요소, 첫번째 글자, 클릭한 요소 */
/* #list1 요소 내의 첫번째 li 요소를 선택 */
#list1 > li:first-child {
color: red;
}
/* 가상 클래스 */
/* - 요소의 이벤트에 대응하기 위해 만들어진 클래스 */
/* - 가상 클래스 선택자는 선택자 앞에 콜론(:)을 작성 */
/* 가상 요소 */
/* - 요소 내의 컨텐츠, 컨텐츠의 위치, 영역 */
/* - 가상 요소 선택자는 선택자 앞에 콜론 두 개(::)를 작성 */
/* → 하나로도 동작이 되어지나, 표준은 두 개 */
/* ---------------------------------------------------- */
/* 반응 선택자 */
/* - 사용자 반응으로 상태가 바뀌는 요소를 선택 */
/* - 종류 */
/* selector:active */
/* : 사용자가 마우스로 클릭하고 있는 selector 요소를 선택 */
/* selector:hover */
/* : 사용자가 마우스 포인터를 올린 selector 요소를 선택 */
/* #list2 요소 내의 li 요소 중 마우스 포인터가 올라간 요소를 선택 */
#list2 > li:hover {
background-color: yellowgreen;
}
/* #list2 요소 내의 li 요소 중 클릭되고 있는 요소를 선택 */
#list2 > li:active {
font-weight: bold;
color: white;
}
/* ---------------------------------------------------- */
/* 상태 선택자 */
/* - 입력 요소의 상태에 따라 요소를 선택 */
/* - 종류 */
/* selector:checked */
/* : 체크된 상태의 입력 요소를 선택 */
/* selector:focus */
/* : 초점이 맞춰진 입력 요소를 선택 */
/* selector:enabled */
/* : 사용 가능한 입력 요소를 선택 */
/* selector:disabled */
/* : 사용 불가능한 입력 요소를 선택 */
/* 속성 선택자는 속성이 있는 경우만 선택이 되어진다. */
/* → 사용자가 체크를 설정/해제해도 영향이 없다. */
/* input[checked] + label { */
input:checked + label {
font-weight: bold;
color: red;
}
/* 사용 가능한 요소 */
input:enabled {
border: 3px solid red;
}
/* 사용 불가능한 요소 */
input:disabled {
border: 3px solid blue;
}
/* 초점이 맞춰진 요소 */
input:focus {
border: 3px solid green;
outline: none;
}
/* ---------------------------------------------------- */
/* 링크 선택자 */
/* - 링크 상태에 따른 선택자 */
/* - 종류 */
/* selector:link */
/* : href 속성이 있는 요소를 선택 */
/* selector:visited */
/* : href 속성이 있으며 방문했던 요소를 선택 */
a {
font-weight: bold;
}
a:link {
font-style: italic;
}
a:visited {
color: orange;
}
/* ---------------------------------------------------- */
/* 구조 선택자 */
/* - 형제 요소들 중에서 특정 위치에 있는 요소를 선택 */
/* n 번째 형제 요소, 짝수 번째 형제 요소.. */
/* - 종류 */
/* 일반 구조 선택자 */
/* : 형제 요소들 중에서 태그 상관 없이 */
/* 특정 위치의 요소를 선택 */
/* 형태 구조 선택자 */
/* : 형제 요소들 중에서 동일한 태그의 요소들 중 */
/* 특정 위치의 요소를 선택 */
/* 첫번째에 위치한 li 요소를 선택 */
/* → 일반 구조 선택자 */
/* li 요소 중 첫번째 요소를 선택 */
/* → 형태 구조 선택자 */
/* 일반 구조 선택자 */
/* - 종류 */
/* selector:forst-child */
/* : 형제 요소들 중 첫 번째에 위치한 요소 */
/* selector:last-child */
/* : 형제 요소들 중 마지막에 위히한 요소 */
/* selector:nth-child(수열) */
/* : 형제 요소들 중 n번빼에 위치한 요소 */
/* : 형제 요소들 중 수열에 위치한 요소 */
/* 2n+1 */
/* selector:nth-last-child(수열) */
/* : 형제 요소들 중 뒤에서 n 번째에 위치한 요소 */
/* 형제 요소들 중 첫 번째에 위치한 li 요소를 선택 */
.list-a > li:first-child {
color: red;
}
/* 형제 요소들 중 마지막에 위치한 li 요소를 선택 */
.list-a > li:last-child {
color: blueviolet;
}
/* 형제 요소들 중 3 번째에 위치한 li 요소를 선택 */
.list-a > li:nth-child(3) {
color: orange;
}
/* 형제 요소들 중 짝수번째에 위치한 li 요소를 선택 */
/* 문자 n 을 포함한 점화식으로 수열을 표현 */
/* 짝수(even number) : 2n */
.list-a > li:nth-child(2n) { /* 0, 2, 4, 6 .. 번째*/
background-color: yellowgreen;
}
/* 형제 요소들 중 홀수번째에 위치한 li 요소를 선택 */
/* 홀수(odd number) : 2n+1 */
.list-a > li:nth-child(2n+1) { /* 1, 3, 5, 7, .. 번째*/
background-color: skyblue;
}
/* 형태 구조 선택자 */
/* - 종류 */
/* selector:first-of-type */
/* : 형제 요소들 중 동일한 태그의 첫번째 요소 */
/* selector:last-of-type */
/* : 형제 요소들 중 동일한 태그의 마지막 요소 */
/* selector:nth-of-type() */
/* : 형제 요소들 중 동일한 태그의 수열 번째에 위치한 요소 */
/* selector:nth-last-of-type() */
/* : 형제 요소들 중 동일한 태그의 뒤에서 수열 번째에 위치한 요소 */
/* 형제 요소들 중 첫번째 li 요소 */
/* = li 요소 중 첫번째 형제 요소 */
.list-b > li:first-of-type {
color: red;
}
/* 형제 요소들 중 마지막 li 요소 */
.list-b > li:last-of-type {
color: blueviolet;
}
/* 형제 요소들 중 3 번째 li 요소 */
.list-b >li:nth-of-type(3) {
color: orange;
}
/* 형제 요소들 중 짝수번째 li 요소 */
/* 짝수와 홀수는 점화식 대신 이름을 지정하여 선택할 수 있다. */
/* 짝수 = even */
/* 홀수 = odd */
.list-b > li:nth-of-type(even) {
background-color: yellowgreen;
}
/* 형제 요소들 중 홀수번째 li 요소 */
.list-b > li:nth-of-type(odd) {
background-color: skyblue;
}
/* ---------------------------------------------------- */
/* 문자 선택자 */
/* - 문자를 선택하기 위한 선택자 */
/* - 종류 */
/* selector::first-letter */
/* : 첫 글자를 선택 */
/* selector::first-line */
/* : 첫 줄을 선택, 브라우저 상에 보여지는 첫 줄 */
h3::first-letter {
/* 기존 폰트의 1.5qo */
font-size: 1.5em;
color: red;
}
p::first-line {
font-weight: bold;
}
/* 반응 문자 선택자 */
/* - 사용자가 문자와 반응하는 영역을 선택 */
p::selection {
background-color: black;
color: gold;
}
/* 전후 문자 선택자 */
/* - 요소에 문자를 추가하기 위한 영역을 선택 */
/* - content 속성이 필수 */
/* - 종류 */
/* selector::before */
/* : 요소의 앞 부분의 영역을 선택 */
/* selector::after */
/* : 요소의 뒷 부분의 영역을 선택 */
p::before {
/* 문자를 추가하는 속성 */
content: "Dummy text : ";
}
p::after {
content: " - 2022.09.23";
font-style: italic;
}
/* --------------------------------------------- */
/* 부정 선택자 */
/* - 다른 선택자의 반대로 선택 */
/* - 형태 */
/* selectorA:not(selectorB) */
/* = A 요소 중 B 가 아닌 요소를 선택 */
/* .list-c 요소의 li 요소 중 마지막을 제외한 요소를 선택 */
.list-c > li:not(:last-child) {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<ol id="list1">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
</ol>
<hr>
<b>반응 선택자</b>
<ol id="list2">
<li>item A</li>
<li>item B</li>
<li>item C</li>
<li>item D</li>
</ol>
<hr>
<form action="/" method="post">
<input type="checkbox" id="check1"> <label for="check1">CHECK!</label>
<br>
<input type="text">
<br>
<input type="text" disabled>
</form>
<hr>
<p>
<a>NO LINK</a>
</p>
<hr>
<b>일반 구조 선택자</b>
<ol class="list-a">
<strong>Group A</strong>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<strong>Group B</strong>
<li>Item D</li>
<li>Item E</li>
</ol>
<ol class="list-a">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
</ol>
<hr>
<b>형태 구조 선택자</b>
<ol class="list-b">
<strong>Group A</strong>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<strong>Group B</strong>
<li>Item D</li>
<li>Item E</li>
</ol>
<ol class="list-b">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
</ol>
<hr>
<h3>What is Lorem Ipsum?</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and <br>
typesetting industry. Lorem Ipsum has been the industry's <br>
standard dummy text ever since the 1500s, when an unknown <br>
printer took a galley of type and scrambled it to make a type <br>
specimen book. It has survived not only five centuries, but <br>
also the leap into electronic typesetting, remaining <br>
essentially unchanged. It was popularised in the 1960s with <br>
the release of Letraset sheets containing Lorem Ipsum <br>
passages, and more recently with desktop publishing software <br>
like Aldus PageMaker including versions of Lorem Ipsum. <br>
</p>
<hr>
<ol class="list-c">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
</ol>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| CSS : Property(속성) 2 (1) | 2023.03.13 |
|---|---|
| CSS : Property(속성) 1 (0) | 2023.03.13 |
| CSS : Selector(선택자) 2 (0) | 2023.03.13 |
| CSS : Selector(선택자) 1 (0) | 2023.03.13 |
| CSS : CSS (0) | 2023.03.13 |