속성 선택자
html 테그는 속성을 가지고 있습니다. 테그의 속성을 이용하여 요소를 선택하는 방법을
속성 선택자(Atribute selector)라고 합니다.
속성이란?
css를 위한 대표적인 속성은 class와 id 입니다. 그 외에도 html의 요소에는 다양한 속성이 존재합니다.
이러한 모든 속성들 또한 CSS를 선택할 수 있는 선택자로도 사용이 가능합니다.
속성을 통한 선택은 크게 속성이 존재하는지와 속성의 값이 일치하는지를 통하여 선택 가능합니다.
속성지정 문법
css에서 속성을 지정할때에는 [ ]를 사용합니다. 대괄호 안에 속성명을 입력합니다.
속성이 존재하는지 여부
속성명만 지정하는 경우에는 속성값이 존재하는지 여부를 체크합니다.
태그와 속성명 같이 결합
요소를 선택할때 공백없이 지정을 하면, 지정된 선택을 모두 가지고 있는 and 조건입니다.
따라서, 태그와 속성값을 이어서 작성을 하면, 태그명 중에서 해당 속성을 가지고 있는 요소를 선택할 수 있습니다.
a[target] {
background-color:skyblue;
}
위의 예제는 a 태그중에서 target속성을 가지고 있는 경우에 적용 합니다.
속성값 일치 여부
속성의 존재 뿐만 아니라 값의 일치여부까지 확인하여 스타일을 적용합니다.
예를 들어 봅니다.
a[target="_blank"] {
background-color:skyblue;
}
일치할때는 =로 합니다.
이러한 속성의 일치 여부는 input과 같은 태그를 선택할때 매우 유용합니다. input은 이름이 모두 같이만 type 속성값에 따라 형태가 달라지기 때문입니다.
속성은 한개 뿐만 아니라, 여러 속성을 같이 비교도 할 수 있습니다.
문자열 속성 선택자
문자열 속성 선택자는 태그에 지정한 속성이 특정 문자열을 확인합니다.
[속성 ~= 값] 형식
속성을 비교할 값이 여러개일 경우에 사용합니다. 값이 그중 하나만 일치해도 스타일을 적용합니다.
CSS2.1 부터 정의되었습니다.
속성의 단어가 포함하는 경우 ~=를 사용합니다.
a[href~="title"] {
color:green;
}
| 선택자[속성~＝값]과 선택자[속성 |
= 값]의 설명이 유사합니다. 하지만 이 둘은 하이픈(-)이 들어간 단어의 구분 방법이 다릅니다. |
예를들면, ko-kr와 같은 문자열을 선택할때는 [속성~＝값]를 사용하면 됩니다. 반대로 [속성 |
= 값]를 사용하게 되면 ko와 kr이 선택됩니다. |
*=와 다른것은 값의 문자열에 일부분이 포함하는 것이 아니라, 단어가 포함하는지 여부를 확인하는 것입니다.
[속성 ^= 값] 형식
캐럿(^)이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다.
CSS3부터 정의되었습니다.
속성 값이 지정한 값으로 시작하는 경우 ^=로 사용합니다.
예를들어 href 속성 값이 http://로 시작하는 링크를 선택합니다.
a[href="http://"] {
font-style:italic;
}
[속성 $= 값] 형식
속성과값이 일치하는 요소를 찾아스타일을 적용합니다. 단，$ 기호가붙으면 지정한 문자로 끝나 는 속성에 대해서만 스타일을 적용합니다.
CSS3부터 정의되었습니다.
속성값이 끝나는 경우 $= 를 사용합니다.
a[href$=".co.kr"] {
color:green;
}
문자열 속성 응용
$=을 잘 사용하면 이미지등을 출력할때 파일 확장자를 구분하여 다르게 처리할 수도 있습니다.
img[src$=png] {
}
img[src$=jpg] {
}
img[src$=gif] {
}
[속성 |= 값] 형식
속성이 지정한 값으로 시작하면 스타일을 적용합니다.
[속성 *= 값] 형식
사용자가 지정 한속성 값의 앞 이나 뒤 또는 중간등 어느 위치에 있든지 해당값이 포함되어 있으면스타일이 적용됩니다.
속성값에 일정값이 포함하고 있는 경우
a[href*=".com"] {
color:red;
}
포함하고 있을 때는 *=로 합니다.