[CSS] 속성 선택자

속성 선택자는 태그 , 클래스 이름, ID이름으로 선택한 뒤 스타일을 적용하는 방법 말고

태그 안에서 사용되는 속성들의 값에따라 스타일을 지정할 수 있습니다.

속성 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다.

[] 대괄호 사이에 찾으려는 속성을 지정하면 됩니다.

<a>1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>

이중 href속성이 존재하는 a태그만을 찾기 위해선

a[href]{
}

이 처럼 작성해 찾을 수 있습니다.

속성의 존재유무로만 찾는 것이 아닌 속성의 값에 따라서도 선택할 수 있습니다.

대괄호 안에 속성과 속성값을 넣고 사이에 부등호를 넣습니다.

<input type="text"/>
<input type="password"/>
<input type="email"/>
<input type="file"/>
<input type="radio"/>

이중 type값이 text인 input만 찾고 싶다면

input[type="text"]{
}

으로 찾을 수 있습니다.

특정 값이 포함된 속성에 스타일을 적용합니다. 이 경우 값은 한 단어로 일치해야 합니다.

이 선택자의 유용한 기능은 -(하이픈)으로 연결된 단어에도 스타일을 적용한다는 점입니다.

<div class="student-one"></div>
<div class="student-two"></div>
<div class="student-three"></div>
<div class="student-four"></div>

클래스명을 공백으로 구분해 student one 이렇게 두 개의 클래스명을 사용하는 불편한 점을 처리할 수 있는 방법입니다.

div[class |="student"]{
}

그 외 속성으로 선택하는 방법입니다.