속성 선택자의 기본 개념은 해당 속성이 있는 요소를 선택하는 것이다. 예를 들어 a 태그 여러개를 만들어 여러 속성을 부여했는데 그중에 text-decoration이 none인 속성을 가진 것들을 선택하고 싶을 때 사용할 수 있다.
속성선택자
사용법은 대괄호 안에 원하는 속성을 입력해서 사용한다.
a[href] {
color : #fff;
}
다음 코드는 a태그중에 링크가 있는 요소만 선택하는 코드이다. a 태그더라도 href가 없다면 선택되지 않는다.
특정 속성 선택자
특정 속성 선택자는 속성의 속성값까지 일치해야 선택하는 선택자이다. 사용법은 [ 속성 = 속성값 ] 이다.
a [target = _blank]{
background: url(...)
}위 코드는 a태그의 target 속성이 _blank인 요소를 찾아 배경에 이미지를 넣는 코드이다.
속성 ~= 값 선택자
속성에 값 선택자(B) 가 있다면 선택하는 코드이다. 처음에 이해가 잘 되지 않았지만 예시 코드를 보며 이해했다.
...
a[class ~="button"] {
box-shadow:rgba(0,0,0,0.5) 4px 4px;
border-radius: 5px;
border:1px solid #222;
}
...
<body>
<ul>
<li><a href="#" class="flat">메뉴 1</a></li>
<li><a href="#" class="flat">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
</body>
...결과 보기
여기서 사용되는 ~= 선택자는 class안에 button 이 있는 경우만 선택한다. 그래서 3번 4번 메뉴를 선택하지만, bu 혹은 ton 처럼 완벽하지 않은 단어를 사용한다면 (띄어쓰기로 구분) 선택되지 않는다.
특정 속성값으로 시작하는 속성 ^= 값 선택자
위 방법은 속성의 시작 글자를 지정하면 그 글자가 완벽히 일치하지 않아도 선택한다. 쉽게 말해서 위 코드에 bu만 넣어도 button인 속성값을 가진 요소가 선택된다.
a[title ^= eng]{
...
}반응형
'Front end > CSS' 카테고리의 다른 글
| 트랜지션과 애니메이션 속성 모음 (0) | 2022.12.18 |
|---|---|
| CSS 고급 선택자 (연결 선택자) (0) | 2022.11.03 |
| 이미지와 그라데이션 효과로 배경 꾸미기 (2) | 2022.10.02 |
| 레이아웃을 구성하는 css 박스모델 (2) (1) | 2022.09.11 |
| 레이아웃을 구성하는 css 박스모델 (1) (2) | 2022.09.09 |
댓글