CSS 속성 선택자 종류 및 사용법 (Attribute Selectors)

CSS 속성 선택자 정리

 

속성 선택자란

CSS 속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 데 사용됩니다. 이는 HTML 요소의 특정 속성이나 속성 값에 따라 정밀하게 스타일을 적용할 수 있게 해줍니다. 다양한 종류의 속성 선택자와 그 사용 방법은 다음과 같습니다.

 

기본 속성 선택자 (Attribute Selector)

기본 속성 선택자는 특정 속성을 가진 모든 요소를 선택합니다.

[element[attribute]] {
    /* 스타일 규칙 */
}

 

예제: [href]는 href 속성을 가진 모든 요소를 선택합니다.

a[href] {
    color: blue;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

특정 값 속성 선택자 (Attribute Selector with Specific Value)

특정 속성 값과 일치하는 요소를 선택합니다.

[element[attribute="value"]] {
    /* 스타일 규칙 */
}

 

예제: input[type="text"]는 type 속성이 text인 모든 input 요소를 선택합니다.

input[type="text"] {
    border: 1px solid black;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

부분 일치 속성 선택자 (Substring Matching Attribute Selectors)

부분 일치 속성 선택자는 속성 값의 일부와 일치하는 요소를 선택하는 데 사용됩니다.

 

^= (시작 일치 선택자)

속성 값이 특정 문자열로 시작하는 요소를 선택합니다.

[element[attribute^="value"]] {
    /* 스타일 규칙 */
}

 

예제: a[href^="https"]는 href 속성이 https로 시작하는 모든 a 요소를 선택합니다.

a[href^="https"] {
    color: green;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

$= (끝 일치 선택자)

속성 값이 특정 문자열로 끝나는 요소를 선택합니다.

[element[attribute$="value"]] {
    /* 스타일 규칙 */
}

 

예제: a[href$=".pdf"]는 href 속성이 .pdf로 끝나는 모든 a 요소를 선택합니다.

a[href$=".pdf"] {
    color: red;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

*= (포함 일치 선택자)

속성 값에 지정된 문자열이 포함된 모든 요소를 선택합니다. 포함된 위치는 상관없습니다.

[element[attribute*="value"]] {
    /* 스타일 규칙 */
}

 

예제: a[href*="example"]는 href 속성에 example 문자열이 포함된 모든 a 요소를 선택합니다.

a[href*="example"] {
    color: purple;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

공백 구분 값 일치 선택자 (Attribute Selector with Whitespace Separated Values)

공백으로 구분된 속성 값 목록 중 하나가 지정된 문자열과 정확히 일치하는 요소를 선택합니다. 단어 단위로 일치해야 합니다.

[element[attribute~="value"]] {
    /* 스타일 규칙 */
}

 

예제: [class~="intro"]는 class 속성 값에 intro가 포함된 모든 요소를 선택합니다.

p[class~="intro"] {
    font-weight: bold;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

예제 코드

위에서 배운 속성 선택자들을 모두 사용하여 예제코드로 확인 해보겠습니다.

/* 기본 속성 선택자 */
a[href] {
    color: blue;
}

/* 특정 값 속성 선택자 */
input[type="text"] {
    border: 1px solid black;
}

/* 부분 일치 속성 선택자 */
a[href^="https"] {
    color: green;
}
a[href$=".pdf"] {
    color: red;
}
a[href*="example"] {
    color: purple;
}

/* 공백 구분 값 일치 선택자 */
p[class~="intro"] {
    font-weight: bold;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.