HTML 속성 선택자

HTML

by 기련이 2020. 5. 14. 16:22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style type="text/css">
/*일반 속성 선택자*/
p[text]{
	color: red;
}
p[text="red"]{
	color: yellow;
	background-color: purple;
}
p[text~="bb"]{
	color: yellow;
	background-color: green;
}
p[text|="a1"]{
	color: yellow;
	background-color: blue;
}
p[text^="img"]{
	color: yellow;
	background-color: red;
}
p[text$="png"]{
	color: yellow;
	background-color: gray;
}
p[text*="ong"]{
	color: yellow;
	background-color: pink;
}
</style>
</head>
<body>
 <p text="hello"> 일반 속성 선택자</p>
 <p text="red">속성값이 같은 태그 선택자</p>
 <p text="aa bb cc">~에 해당하는 태그 선택자</p>
 <p text="a1-a2-a3">|에 해당하는 태그 선택자</p>
 <p text="img/pic.jpg">^에 해당한 태그 선택자</p>
 <p text="img/pic.png">$에 해당한 태그 선택자</p>
 <p text="Hong Gil Dong">*에 해당한 태그 선택자</p>
</body>
</html>

속성 선택자의 형식
[속성] : 속성의 값과 상관없이 해당 속성 모두 선택
[속성="값"] : 속성의 값에 해당하는 태그 선택
[속성~="값"] : 공백으로 구분한 속성 값들 중 하나
주어진 값과 동일한 태그 선택
[속성|="값"] : 속성 값이 해당 값과 동일하거나,
주어진 값으로 시작하고 '-'로 이어진
값을 갖는 태그 선택
[속성^="값"] : 속성 값이 주어진 값으로 시작하는 태그 선택
[속성&="값"] : 속성 값이 주어진 값으로 끝나는 태그 선택
[속성*="값"] : 속성 값이 주어진 값을 부분 문자열로
갖는 태그 선택

'HTML' 카테고리의 다른 글

HTML 가상 선택기 (0)	2020.05.14
HTML 계층 관련 선택자 (0)	2020.05.14
HTML 위치에 따른 스타일 적용 (0)	2020.05.14
HTML CSS3 기초 (0)	2020.05.14
HTML 선택자 스타일 (0)	2020.05.14