고래씌
[CSS] 1-3. CSS 선택자 ③ (문자열 속성 선택자) 본문
1. 문자열 속성 선택자
: 속성값의 문자열을 확인하여 스타일 적용하는 방식의 선택자
■ html 파일내의 body 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자3</title>
<link href="resources/css/selector3.css" rel="stylesheet">
</head>
<body>
<h1>문자열 속성 선택자</h1>
<div name="aaa bbb str-1" class="str-class">div1</div>
<div name="aaa str-2" class="str-class">div2</div>
<div name="str" class="class-str">div3</div>
<div name="aaa str-3" class="str-class2">div4</div>
</body>
</html>
☞ 여기에 여러 속성을 추가해보도록 하겠다
1) 선택자[속성명~=속성값] {css코드}
→ 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택
/* ~= : 여러 속성 값들 중 하나라도 일치하면 선택 */
div[name~="aaa"]{
background-color: greenyellow;
}
2) 선택자[속성명 |= 속성값] {css코드}
→ 속성 값이 특정 값을 단어로 포함하는 요소를 선택
단, "-" 기호로 구분한다. 즉 "-" 앞의 내용이 동일해야한다.
/* |= : "-"기호 앞쪽 단어가 일치하는 요소 선택 */
div[class|="str"] {color : red; font-weight: bold;}
3) 선택자[속성명 ^= "속성값"] {css코드} (^ : 캐럿)
→ 속성값이 속성값으로 시작하는 요소를 선택
/* ^= : 특정 값으로 시작하는 요소를 선택 */
div[class ^= "class"]{
background-color: black;
color: white;
}
☞ 시작하는 요소임. 일치하는 단어가 아니라!!
☞ class로 시작하는 요소만 검은색 배경과 하얀색 글씨로 바뀜
4) 선택자[속성명$="속성값"]{css코드}
→ 속성값이 특정값으로 끝나는 요소를 선택
/* $= : 특정 값으로 끝나는 요소를 선택 */
div[class $= ss]{
font-size: 24px;
}
☞ div1과 div2가 class="str-class"로 "ss"로 끝나기 때문에 폰트사이즈가 적용됨
5) 선택자[속성명 *= "속성값"] {css코드}
→ 속성값이 특정 값을 포함하는 요소 선택
/* *= : 특정 값을 포함하는 요소 선택 */
div[name *= "2"]{
border: 1px solid red;
}
☞ ^, $ 기호를 포함하는 것이라고 생각하면됨
☞ name에 "2"가 포함된 것만 빨간색 테두리가 생김
'Front-End > CSS' 카테고리의 다른 글
| [CSS] 2. CSS 선택자 우선순위 (0) | 2023.11.02 |
|---|---|
| [CSS] 1-5. CSS 선택자 ⑤ (기타 선택자) (0) | 2023.11.02 |
| [CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자 (2) | 2023.11.02 |
| [CSS] 1-2. CSS 선택자 ②(기본 속성 선택자, 자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자 & 실습문제) (0) | 2023.11.01 |
| [CSS] 1-1. CSS개요, 선택자 ① (inline-style 태그, 태그 선택자, id 선택자, class 선택자) (0) | 2023.11.01 |
'Front-End/CSS' Related Articles
more
