[css] 속성 값 선택자
CSS에서는 특정 속성 값에 따라 스타일을 적용할 수 있는 다양한 선택자를 제공합니다.
1. 속성 값 선택자
2. 속성 선택자
3. 가상 클래스 선택자
속성 값 선택자
속성 값 선택자는 특정 속성의 특정 값에 대한 스타일을 지정하는 선택자입니다. 예를 들어, input[type="text"]는 type 속성이 text인 모든 input 요소를 선택하는 선택자입니다.
다음은 일반적으로 사용되는 속성 값 선택자의 몇 가지 예시입니다.
/* input 요소 중 type 속성이 text인 경우에만 적용 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
/* a 요소 중 href 속성 값에 특정 문자열을 포함하는 경우에만 적용 */
a[href*="example.com"] {
color: #00f;
}
/* input 요소 중 type 속성이 checkbox이거나 radio인 경우에만 적용 */
input[type="checkbox"], input[type="radio"] {
margin: 5px;
}
속성 선택자
속성 선택자는 특성 속성의 값을 포함하는 요소를 선택할 때 사용됩니다.
/* lang 속성이 en인 요소를 선택 */
*[lang="en"] {
color: blue;
}
/* class 속성 값에 color-으로 시작하는 요소 선택 */
[class^="color-"] {
font-weight: bold;
}
/* alt 속성이 있는 img 요소를 선택 */
img[alt] {
border: 1px solid #ddd;
}
가상 클래스 선택자
가상 클래스 선택자는 특정 요소의 상태를 선택하기 위해 사용됩니다.
/* 방문하지 않은 링크에 스타일 적용 */
a:link {
color: blue;
}
/* 마우스를 갖다 대었을 때의 링크 스타일 */
a:hover {
text-decoration: underline;
}
속성 값 선택자, 속성 선택자 및 가상 클래스 선택자는 CSS를 통해 요소를 정확하게 선택하여 원하는 스타일을 적용하는 데 유용합니다.
결론
CSS 선택자를 사용하여 특정 속성 값, 속성, 또는 가상 클래스를 선택하고 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 디자인 및 사용자 경험을 더욱 향상시킬 수 있습니다.