web/css
[css] 2. 선택자(selector)
jeri
2024. 4. 30. 22:39
반응형
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
1. 기본 선택자
1) 전체 선택자
- 모든 엘리먼트(Element - 태그)를 선택 - 비권장
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
*{margin: 0; padding: 0;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>2) 태그 선택자
- 태그명을 이용하여 엘리먼트 선택
- 태그명이 같은 다수의 엘리먼트가 선택되어 동일한 스타일 적용
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
h2 { color: green; }
p { color: blue; }
</style>
</head>
<body>
<h2>태그 선택자</h2>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
3) 클래스 선택자
- 태그의 class 속성값을 이용하여 엘리먼트 선택
- 태그 선택자와 구분하기 위해 클래스 선택자는 .으로 시작
- class 속성값이 같은 다수의 엘리먼트가 선택되어 동일한 스타일 적용
class 속성
- CSS 스타일 적용하기 위한 태그의 클래스명을 속성값으로 설정
- "동일한 class 속성값 설정 가능" - 같은 class 속성값을 사용하는 태그에 동일한 CSS 스타일 적용
- class 속성에는 "다수의 속성값을 설정 가능" - 공백으로 속성값 구분
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.text1 { color: maroon; }
.text2 { color: lime; }
.text3 { text-align: center; }
</style>
</head>
<body>
<h2>클래스 선택자</h2>
<p class="text1">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text1 text3">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text2">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
4) 아이디 선택자
- 태그의 id 속성값을 이용하여 엘리먼트 선택
- 태그 선택자와 구분하기 위해 아이디 선택자는 #으로 시작
- id 속성값을 사용하는 하나의 엘리먼트에만 스타일 적용
id 속성
- 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정
- id 속성은 태그를 구분하기 위해 사용하므로 "동일한 속성값 설정 불가능"
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
#text4 { color: olive; }
/* 선택자는 [,] 기호를 이용하여 여러개를 나열하여 엘리먼트 선택 가능 */
#text5 , #text6 { color: silver; }
</style>
</head>
<body>
<h2>아이디 선택자</h2>
<p id="text4">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text5">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text6">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
2. 파생 선택자
1) 후손 선택자
- 부모 엘리먼트를 기준으로 모든 깊이의 엘리먼트(후손 엘리먼트) 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 형식) 선택자(부모) 선택자(후손) */
#super1 div { color: purple; }
</style>
</head>
<body>
<h2>후손 선택자</h2>
<div id="super1">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div>임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
</body>
</html>
2) 자식 선택자
- 부모 엘리먼트를 기준으로 첫번째 깊이의 엘리먼트(자식 엘리먼트) 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 형식) 선택자(부모) > 선택자(자식) */
#super2 > div { color: gold;c }
</style>
</head>
<body>
<h2>자식 선택자</h2>
<div id="super2">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div>임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
</body>
</html>
3) 필터 선택자
- 선택된 다수의 엘리먼트 중 특정 엘리먼트 선택
- 필터 선택자는 반드시 클래스 선택자를 이용해야만 구현 가능
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
#super3 div{ color:orange; }
/* 형식) 선택자.선택자 */
#super3 div.choice{ color: lime; }
</style>
</head>
<body>
<h2>필터 선택자</h2>
<div id="super3">
<div>사원이름</div>
<ul>
<li><div>홍길동</div></li>
<li><div class="choice">임꺽정</div></li>
<li><div>전우치</div></li>
</ul>
</div>
</body>
</html>
4) 형제 선택자
- 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 모든 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 형식) 선택자 ~ 선택자 */
#p1 ~ p { color : fuchsia;}
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<p id="p1">브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
</div>
</body>
</html>
5) 인접 형제 선택자
- 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 첫번째 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 형식) 선택자 + 선택자 */
#p2 + p { color : red;}
</style>
</head>
<body>
<h2>인접 형제 선택자</h2>
<div>
<p id="p2">브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
</div>
</body>
</html>
3. 속성 선택자
- 태그의 속성과 속성값을 이용하여 스타일 적용 가능
- 태그의 속성이나 속성값을 이용하여 엘리먼트 선택
1) 선택자[속성]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성이 존재하는 엘리먼트 선택 */
a[href]{
color: green;
}
</style>
</head>
<body>
<div><a>하이퍼 링크 기능을 제공하는 태그 -1 </a></div>
<div><a href="#">하이퍼 링크 기능을 제공하는 태그 -2 </a></div>
<div><a href="#abc">하이퍼 링크 기능을 제공하는 태그 -3 </a></div>
</body>
</html>
2) 선택자[속성="비교값"]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성값이 비교값과 같은 엘리먼트 선택 */
a[href="#abc"]{
color: blue;
}
</style>
</head>
<body>
<div><a>하이퍼 링크 기능을 제공하는 태그 -1 </a></div>
<div><a href="#">하이퍼 링크 기능을 제공하는 태그 -2 </a></div>
<div><a href="#abc">하이퍼 링크 기능을 제공하는 태그 -3 </a></div>
</body>
</html>
3) 선택자[속성*="비교값"]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성값에 비교값이 포함된 엘리먼트 선택*/
div[title*="여성"]{
color : gold;
}
</style>
</head>
<body>
<div title="여성">화장품-1</div>
<div title="화장품">화장품-2</div>
<div title="여성화장품">화장품-3</div>
<div title="여성 화장품">화장품-4</div>
<div title="남성화장품">화장품-5</div>
<div title="화장품남성">화장품-6</div>
</body>
</html>
4) 선택자[속성~="비교값"]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성값에 비교값이 하나의 단어로 포함된 엘리먼트 선택 */
div[title~="여성"]{
color : silver;
}
</style>
</head>
<body>
<div title="여성">화장품-1</div>
<div title="화장품">화장품-2</div>
<div title="여성화장품">화장품-3</div>
<div title="여성 화장품">화장품-4</div>
<div title="남성화장품">화장품-5</div>
<div title="화장품남성">화장품-6</div>
</body>
</html>
5) 선택자[속성^="비교값"]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성값이 비교값으로 시작되는 엘리먼트 선택 */
div[title^="남성"]{
color : orange;
}
</style>
</head>
<body>
<div title="여성">화장품-1</div>
<div title="화장품">화장품-2</div>
<div title="여성화장품">화장품-3</div>
<div title="여성 화장품">화장품-4</div>
<div title="남성화장품">화장품-5</div>
<div title="화장품남성">화장품-6</div>
</body>
</html>
6) 선택자[속성$="비교값"]
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
/* 태그 속성값이 비교값으로 종료되는 엘리먼트 선택 */
div[title^="남성"]{
color : maroon;
}
</style>
</head>
<body>
<div title="여성">화장품-1</div>
<div title="화장품">화장품-2</div>
<div title="여성화장품">화장품-3</div>
<div title="여성 화장품">화장품-4</div>
<div title="남성화장품">화장품-5</div>
<div title="화장품남성">화장품-6</div>
</body>
</html>
4. 가상 선택자
- 태그의 상태에 따라 다른 스타일을 적용하기 위해 사용
- 선택된 엘리먼트의 상태에 의해 CSS 스타일을 다르게 적용
1) :link
- a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {font-size: 20px; line-height: 35px;}
a {text-decoration: none; color: orange;}
a:link {color: lime;}
</style>
</head>
<body>
<div>
<a href="https://www.daum.net?bbb">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
</div>
</body>
</html>
2) :visited
- a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번이상 요청한 상태
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {font-size: 20px; line-height: 35px;}
a {text-decoration: none; color: orange;}
a:link {color: lime;}
a:visited {color: pink;}
</style>
</head>
<body>
<div>
<a href="https://www.daum.net?bbb">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
</div>
</body>
</html>
3) :active
- 선택된 엘리먼트에 마우스 커서를 위치하여 버튼으로 누르고 있는 상태
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {font-size: 20px; line-height: 35px;}
a {text-decoration: none; color: orange;}
a:link {color: lime;}
a:visited {color: pink;}
a:active {color: lightgray;}
</style>
</head>
<body>
<div>
<a href="https://www.daum.net?bbb">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
</div>
</body>
</html>
4) :hover
- 선택된 엘리먼트에 마우스 커서를 위치하고 있는 상태
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {font-size: 20px; line-height: 35px;}
a {text-decoration: none; color: orange;}
a:link {color: lime;}
a:visited {color: pink;}
a:active {color: lightgray;}
a:hover {color: blue;text-decoration: underline;}
</style>
</head>
<body>
<div>
<a href="https://www.daum.net?bbb">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
</div>
</body>
</html>
5) :first-child
- 선택된 다수의 엘리먼트 중 첫번째 엘리먼트 선택
ul li:first-child { color: red;}<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ul li:first-child { color: red;}
</style>
</head>
<body>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ul>
</body>
</html>
6) :last-child
- 선택된 다수의 엘리먼트 중 마지막 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ul li:last-child { color: green;}
</style>
</head>
<body>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ul>
</body>
</html>
7) :nth-child(x)
- 선택된 다수의 엘리먼트 중 x번째 위치한 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ul li:nth-child(2) { color: blue;}
</style>
</head>
<body>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ul>
</body>
</html>
8) :nth-last-child(x)
- 선택된 다수의 엘리먼트 중 뒤에서 x번째 위치한 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ul li:nth-last-child(2) { color: silver;}
</style>
</head>
<body>
<ul>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ul>
</body>
</html>
9) :nth-child(2n-1)
- 선택된 다수의 엘리먼트 중 홀수 번째 위치한 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ol li:nth-child(2n-1) { color: teal;}
/* nth-child(2n-1) 대신 nth-child(odd) 사용 가능 */
ol li:nth-child(odd) { color: teal;}
</style>
</head>
<body>
<ol>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ol>
</body>
</html>
10) :nth-child(2n)
- 선택된 다수의 엘리먼트 중 짝수 번째 위치한 엘리먼트 선택 */
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ol li:nth-child(2n) { color: fuchsia;}
/* nth-child(2n) 대신 nth-child(even) 사용 가능 */
ol li:nth-child(even) { color: fuchsia;}
</style>
</head>
<body>
<ol>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ol>
</body>
</html>
11) :nth-child(3n)
- 선택된 다수의 엘리먼트 중 x의 배수번째 위치한 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
ol li:nth-child(3n) { color: pink;}
</style>
</head>
<body>
<ol>
<li>홍길동</li>
<li>임꺽정</li>
<li>전우치</li>
<li>일지매</li>
<li>장길산</li>
</ol>
</body>
</html>
12) :not(선택자)
- 선택자의 엘리먼트를 제외한 나머지 엘리먼트 선택
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
input { border: 1px solid black; }
input[type="text"] { border: 1px solid maroon; }
input:not([type="text"]) { border: 1px solid orange; }
</style>
</head>
<body>
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" value="abc123"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" value="홍길동" disabled="disabled"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email"></td>
</tr>
</table>
</body>
</html>
13) :disabled & :checked & :selected
- :disabled : 선택된 엘리먼트가 비활성화 상태인 경우
- :checked : 선택된 엘리먼트가(<input>의 radio 또는 checkbox)가 선택된 상태인 경우
- :selected : 선택된 엘리먼트가(<select>의 option )가 선택된 상태인 경우
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
input[type="text"]:disabled { border: 1px dotted red; }
</style>
</head>
<body>
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" value="abc123"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" value="홍길동" disabled="disabled"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email"></td>
</tr>
</table>
</body>
</html>
14) :focus
- 선택된 엘리먼트(입력태그)에 입력촛점이 위치한 상태인 경우
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
input:focus { border: 3px double green;}
</style>
</head>
<body>
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" value="abc123"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name" value="홍길동" disabled="disabled"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email"></td>
</tr>
</table>
</body>
</html>
반응형