5. CSS 선택자
* DOM 트리 계층구조
- 개별적인 요소를 노드(node) 라고 부른다.
element node: tage 의미
text node: 리터럴 값 의미
attribute node: 속성의미
nodelist: 같은 부모의 자식의 모임(배열로 받음)
html
head body
| |
title div p span a - href
link | | |
script div "다음" "daum.net"
style |
p
|
"hello"
1) 개념
- DOM 의 요소를 접근(선택)하는 방법.
2) 문법
가. 전체선택자
- * 표현
- DOM 트리에 있는 모든 태그가 선택됨.
ex)
<style>
* {
color: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자1-전체선택자</title>
<style>
* {
/* 전체 */
color: red;
}
</style>
</head>
<body>
<p>Hello</p>
<span>Hello2</span>
<a href="">daum</a>
<div>
<div>
world
</div>
</div>
</body>
</html>
나. 태그선택자
- 태그명으로 표현
만약에 여러개 표현할떄는 ,(쉼표) 지정하고 사용.
ex)
<style>
p {
color: red;
}
p, div, #xx, .yy {
color: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자2-태그선택자</title>
<style>
p {
/* p 태그만 */
color: blue;
}
span,
a {
/* span, a 태그만 */
color: aqua;
font-size: 30px;
}
</style>
</head>
<body>
<p>Hello</p>
<span>Hello2</span>
<a href="">daum</a>
<div>
<div>
world
</div>
</div>
</body>
</html>
다. id 속성 선택자
- #id 표현
- 중복불가( 유일하게 지정한다. )
ex)
/* head */
<style>
#xxx {
color: red;
}
</style>
/* body */
<p id="xxx">Hello</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자3-id선택자</title>
<style>
#xxx {
color: blueviolet;
}
</style>
</head>
<body>
<p>Hello</p>
<p id="xxx">Hello2</p>
<span>Hello2</span>
<a href="">daum</a>
<div>
<div>
world
</div>
</div>
</body>
</html>
라. class 속성 선택자
- .class 표현
- 중복이 가능
- 한번에 여러개 지정가능 ( ex) class="yyy yyy2" )
독립적으로 적용됨.
만약 class="xxx xxx2" 인 경우 나중에 정의된 xxx2 가 적용된다.
ex)
/* head */
<style>
.xxx {
color: red;
}
.xxx2 {
color: blue;
}
</style>
/* body */
<p class="xxx">Hello</p>
<span class="xxx">Hello</p>
...
<span class="xxx2">Hello</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자4-class 선택자</title>
<style>
.select {
color: red;
}
.li-size {
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li class="select">홍길동</li>
<li>이순신</li>
<li class="select li-size">유관순</li>
<li>강감찬</li>
</ul>
</body>
</html>
- 헷갈릴만한 선택자 표현식 예
<style>
.select .aaa {
/* class 가 select 를 찾고 그 자손으로 class 가 aaa인 요소 반환. */
}
.select.aaa {
/* class 가 select 이면서( 그리고 and ) class 가 aaa인 요소 반환. */
}
.select, .aaa {
/* class 가 select 이거나 또는 ( or ) class 가 aaa인 요소 반환. */
}
</style>
마. 계층구조 1- 자식
- 부모선택 > 자식선택
ex)
#xxx > p {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자5-계층구조1-자식선택자</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#one>h1 {
color: red;
}
</style>
</head>
<body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<div>
<h1>world</h1>
</div>
</div>
</body>
</html>
바. 계층구조 2- 자손 ( 공백 )
- 부모선택 자손선택
- 자식포함.
ex)
#xxx p {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자5-계층구조2-자손선택자</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#one h1 {
color: red;
}
</style>
</head>
<body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<div>
<h1>world</h1>
</div>
</div>
</body>
</html>
사. 계층구조 3- 형제
- 선택자 + 형제
- 인접한 바로 뒤의 형제요소 반환
ex)
#xxx + p {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자5-계층구조3-바로 뒤 형제 반환</title>
<style>
h1+h2 {
color: red;
}
</style>
</head>
<body>
<h1>홍길동</h1>
<h2>이순신</h2>
<h3>유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>
아. 계층구조 4- 형제들
- 선택자 ~ 형제들
- 인접한 바로 뒤의 모든 형제요소 반환
ex)
#xxx ~ p {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자5-계층구조3-바로 뒤 형제들 반환</title>
<style>
h1~h2 {
color: red;
}
</style>
</head>
<body>
<h1>홍길동</h1>
<h2>이순신</h2>
<h3>유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
</body>
</html>
자. 속성으로 찾기
- 특정속성으로 구성된 요소를 찾을때 사용됨.
ex) <a href="http://www.daum.net">다음</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.navercloud.com">네이버</a>
<link href="">
a. 속성명으로 찾기
- [속성명] 표현식, 태그명[속성명]
ex)
[href] {
/* <a href="http://www.daum.net">다음</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.navercloud.com">네이버</a>
<link href=""> */
}
a[href] {
/* <a href="http://www.daum.net">다음</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.navercloud.com">네이버</a> */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성1-속성명으로 찾아서 반환</title>
<style>
[id] {
color: red;
}
a[id] {
font-size: 40px;
}
</style>
</head>
<body>
<h1 id="one">홍길동</h1>
<h2>이순신</h2>
<h3 id="two">유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
<a href="#" id="link">go</a>
</body>
</html>
b. 속성명="속성값"으로 찾기 ( 정확하게 일치하는 속성값을 가진 요소 반환 )
- [속성명="속성값"] 표현식, 태그명[속성명="속성값"]
a[href="http://www.daum.net"] {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성2-속성값으로 찾아서 반환</title>
<style>
[id="one"] {
color: red;
}
</style>
</head>
<body>
<h1 id="one">홍길동</h1>
<h2>이순신</h2>
<h3 id="two">유관순</h3>
<h2>강감찬</h2>
<h2>윤봉길</h2>
<a href="#" id="link">go</a>
</body>
</html>
c. 속성명^="속성값"으로 찾기 ( 지정된 속성값으로 시작하는 요소 반환 )
- [속성명^="속성값"] 표현식, 태그명[속성명^="속성값"]
a[href^="https"] {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성3-속성값으로 시작하는 요소 찾아서 반환</title>
<style>
a[href^="https"] {
color: red;
}
</style>
</head>
<body>
<a href="http://naver.com">one</a><br>
<a href="https://naver.com" target="_blank">two</a><br>
<a href="https://daum.net">three</a><br>
<a href="http://daum.net" target="_blank">four</a><br>
<a href="https://korea.com">five</a><br>
<a href="http://korea.com" target="_blank">six</a><br>
</body>
</html>
d. 속성명$="속성값"으로 찾기 ( 지정된 속성값으로 시작하는 요소 반환 )
- [속성명$="속성값"] 표현식, 태그명[속성명$="속성값"]
a[href$="com"] {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성4-속성값으로 끝나는 요소 찾아서 반환</title>
<style>
a[href$="net"] {
color: red;
}
</style>
</head>
<body>
<a href="http://naver.com">one</a><br>
<a href="https://naver.com" target="_blank">two</a><br>
<a href="https://daum.net">three</a><br>
<a href="http://daum.net" target="_blank">four</a><br>
<a href="https://korea.com">five</a><br>
<a href="http://korea.com" target="_blank">six</a><br>
</body>
</html>
e. 속성명*="속성값"으로 찾기 ( 지정된 속성값이 포함된 요소 반환 )
- [속성명*="속성값"] 표현식, 태그명[속성명*="속성값"]
a[href*="naver"] {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성5-속성값이 포함된 요소 찾아서 반환</title>
<style>
div[class*="man"] {
color: red;
}
</style>
</head>
<body>
<div class="man-news">man-news</div>
<div class="milk man">milk man</div>
<div class="letter2man2">letterman2</div>
<div class="newmilk">newmilk</div>
<div class="superman">superman</div>
</body>
</html>'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| CSS 2일차 - Box Model, box-sizing, margin, padding, border (1) | 2024.04.23 |
|---|---|
| CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소 (0) | 2024.04.23 |
| CSS 1일차 - 적용방법3가지, 캐스캐이딩 & 명시도 (0) | 2024.04.22 |
| HTML 2일차 - 시멘틱 태그, 사용자 입력, form, img, iframe, 특수문자 (0) | 2024.04.22 |
| HTML 2일차 - table, list, span (0) | 2024.04.22 |
