선택자 관련 글
(1) 전체선택자, class선택자, id선택자, 태그선택자, 속성선택자
(2) 하위선택자, 자식선택자, 인접형제선택자, 형제선택
속성선택자(attribute selector)에 대해 이전 글에서 간단하게 말하고 넘어갔다. 속성선택자의 경우에는 속성값에 조건을 붙여서 선택할 수 있는데 이에 대해서 설명해보고자 한다. 속성 선택자의 경우 특정 속성에 접근하기 위해서 사용하는데 대부분 input을 사용할 때 쓰인다.
- 셀렉터[readonly]{}
해당하는 셀렉터에 readonly 속성이 있으면 스타일을 적용한다는 뜻이다. - 셀렉터[value="문자"]{}
해당하는 셀렉터의 value 속성이 정확히 "문자"일 때 스타일을 적용한다는 뜻이다. - 셀렉터[title~="문자"]{}
해당하는 셀렉터의 title 속성에 "문자"라는 글자를 포함하고 있으면 스타일을 적용한다는 뜻이다. 완벽히 일치하지 않아도 되기 때문에 최대한 사용하지 않는 것을 추천한다. - 셀렉터[title ^="a"]{}
해당하는 셀렉터의 title 속성이 "a"라는 글자로 시작하면 스타일을 적용한다는 뜻이다. - 셀렉터[type$="h"]{}
해당하는 셀렉터의 type의 끝 글자가 "h"로 끝나면 스타일을 적용한다는 뜻이다. - 셀렉터[id*="문자]{}
해당하는 셀렉터의 id 속성에 "문자"라는 글자를 포함하고 있으면 스타일을 적용한다는 뜻이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* input태그에 readonly 속성이 있으면 */
input[readonly] {
background-color: #cccccc;
}
/* input태그에 value속성이 bbb일 경우 */
input[value="bbb"] {
background-color: lightgoldenrodyellow;
}
/* input태그에 title속성에 abc를 포함하고 있을 경우 */
input[title~="abc"] {
height: 40px;
}
/* 값이 a로 시작하면 이라는 뜻 */
input[title^="a"] {
box-shadow: 2px 2px 2px 2px black;
}
/* 타입이 r로 끝나면 */
input[type$="r"] {
margin: 50px;
}
/* id에 bcd에 포함되어 있으면 이라는 뜻*/
input[id*="bcd"] {
width: 300px;
}
div {
display: inline-block;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<form action="" method="get">
<div>
<p>readonly속성, 타입에 bcd 포함</p>
<input type="text" title="def abc" name="" id="abcd" readonly value="ccc"><br>
</div>
<div>
<p>value=bbb</p>
<input type="search" title="def" name="" id="" value="bbb"><br>
</div>
<div>
<p>type이 r로 끝남</p>
<input type="color" name="" id=""><br>
</div>
<div>
<p>title이 abc를 포함하고 있고 a로 시작됨</p>
<input type="date" title="abc" name="" id=""><br>
</div>
<div>
<p>id에 bcd 포함</p>
<input type="checkbox" name="" id="abcdefg"><br>
</div>
</form>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3로 동적 변화를 만들어보자 - 2. Transition (0) | 2024.07.08 |
|---|---|
| CSS3로 동적 변화를 만들어보자 - 1. Transform (0) | 2024.07.08 |
| CSS의 선택자(selector) - 4. :target, :not (0) | 2024.07.07 |
| CSS의 선택자(selector) - 3. 가상 클래스 선택자(pseudo class)와 가상요소 선택자(pseudo element) (0) | 2024.07.07 |
| CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 (0) | 2024.07.07 |
| CSS를 이용해 오디오와 비디오를 넣어보자 (0) | 2024.07.07 |
| CSS의 width와 height 속성을 알아보자 (0) | 2024.07.07 |
| CSS에서 display를 사용해서 테이블을 만들어보자 (0) | 2024.07.07 |