1. [속성^=값]연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성값의 시작 부분이 일치하는 요소에 스타일 적용하기 </title>
</head>
<style>
ul { list-style:none;}
li {
display:inline-block;
margin:10px;
}
li a{
padding: 5px 20px;
font-size:14px;
color:blue;
text-decoration:none;
}
a[title^=eng] { /*속성값이 "eng"로 시작하는 a 요소를 찾는 선택자 */
background:url("us.png") no-repeat left center;
}
a[title^=jap] { /*속성값이 "jap"로 시작하는 a 요소를 찾는 선택자 */
background:url("jp.png") no-repeat left center;
}
a[title^=chin] { /*속성값이 "chin"로 시작하는 a 요소를 찾는 선택자 */
background:url("ch.png") no-repeat left center;
}
</style>
<body>
<ul>
<li>외국어 서비스:</li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chinese">중국어</a></li>
</ul>
</body>
</html>
2. [속성 $=값] 연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 확장자에 따라 아이콘 다르게 표시하기 </title>
</head>
<style>
ul {
list-style-type:square;
}
li a{
line-height:30px;
color:blue;
font-size:14px;
text-decoration:none;
}
a[href$=hwp]
{ /*링크 속성값이 hwp로 끝나는 a 요소를 찾는 선택자 */
background:url("hwp_icon.gif") center right no-repeat;
padding-right:25px; /*오른쪽 패딩 지정*/
}
a[href$=xls]
{ /*링크 속성값이 xls로 끝나는 a 요소를 찾는 선택자 */
background:url("excel_icon.gif") center right no-repeat;
padding-right:25px;
}
</style>
<body>
<h3>회사 소개 파일 내려받기</h3>
<ul>
<li><a href="intro.hwp">hwp 파일</a></li>
<li><a href="intro.xls">엑셀 파일</a></li>
</ul>
</body>
</html>
3. [속성 *=값] 연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성값의 일부가 일치하는 요소에 스타일 적용하기 </title>
</head>
<style>
ul {list-style-type:circle;}
li{
padding:5px 30px;
}
li a{
font-size:16px;
color:black;
text-decoration:none;
}
a[href *= "w3"]
{
/*속성값 중 일부에 w3가 있는 a 요소를 찾는 선택자*/
background:blue;
color:white;
}
</style>
<body>
<h1>HTML5 참고 사이트 </h1>
<p>(아래 링크 중에서 배경색이 파란색인 링크는 W3C 사이트로 연결됩니다.)</p>
<ul>
</ul>
</body>
</html>
'css' 카테고리의 다른 글
| 10장 예제 - 가상 클래스를 사용해 링크 스타일 적용하기 (0) | 2023.04.01 |
|---|---|
| 10장 실습 2 (0) | 2023.04.01 |
| 10장 예제 - [속성~=값]선택자/ [속성 | 값] 선택자 (0) | 2023.04.01 |
| 10장 예제 -[속성]선택자 /[속성=속성값]선택자 (0) | 2023.03.31 |
| 10장 실습 1 (0) | 2023.03.31 |
