본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 24(CSS 속성 선택자)

반응형

1. 속성 선택자

기본속성 선택자[속성=값]   input[type=text]
문자열속성 선택자[속성~=값] 공백 div[data-role~=row]
선택자[속성|=값] 하이픈 div[data-role!=row]
선택자[속성^=값] 시작 div[data-role^=row]
선택자[속성$=값] div[data-role$=row]
선택자[속성*=값] 포함 div[data-role*=row]

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4일차</title>
<link href="css/ex02.css" rel="stylesheet">
</head>

<body>
<h1>CSS 2일차</h1>
<p class="newspaper">newspaper</p>
<p class="news paper">newspaper</p>
<p class="news-paper">newspaper</p>
<p class="newpaper">newspaper</p>
<p class="newspapers">newspaper</p>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */

/* p 태그에 클래스 속성이 newspaper에 background 적용 */
p[class=newspaper]{
	background:tomato;
	}
/* p 태그에 클래스 속성이 news를 포함 */
p[class*=news]{
	background:chocolate;
}
/* p 태그에 클래스 속성이 news를 포함하며 공백이 있는 것 */
p[class~=news]{
	background:lime;
}
/* p 태그에 클래스 속성이 news를 포함하며 하이픈이 잇는 것 */
p[class|=news]{
	background:purple;
}
/* p 태그에 클래스 속성이 newp로 시작하는 것 */
p[class^=newp]{
	background:lavender;
}
/* p 태그에 클래스 속성이 ers로 끝나는 것 */
p[class$=ers]{
	background:orange;
}

 

4. HTML / CSS 파일

ex02.html
0.00MB
ex02.css
0.00MB

 

5. HTML 미리보기

< CSS 2일차 >

반응형

태그