속성 선택자
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 속성값에 따라 형태가 달라지기 때문입니다.
input[type=text] {
}
속성은 한개 뿐만 아니라, 여러 속성을 같이 비교도 할 수 있습니다.
선택자[속성=값][속성=값] {
}
문자열 속성 선택자
문자열 속성 선택자는 태그에 지정한 속성이 특정 문자열을 확인합니다.
[속성 ~= 값] 형식
속성을 비교할 값이 여러개일 경우에 사용합니다. 값이 그중 하나만 일치해도 스타일을 적용합니다.
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;
}
포함하고 있을 때는
*=로 합니다.