<HTML+CSS3>속성 선택자

지금부터 살펴볼 속성 선택자는 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정합ㄴ다.

[속성] 형식

-지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. '[' 과 ']' 사이에 찾고자 하는 속성을 지정하면 됩니다.

ex)[속성] {속성:속성 값 ; ... }

다음 예는 <a>태그로 링크를 건 부분 중 target속성이 있는 링크에 적용할 스타일을 지정한 것입니다.

ex)a [target] {background-color:skyblue;}

[속성 = 값 ] 형식

-주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다

ex) [ 속성 =값] { 속성: 속성값; }

다음 예는 링크 중에서 target="_blank"인 링크, 즉 새탑으로 열리는 링크에 적용할 스타일을 지정한 것입니다.

ex) a [target="_blank"] {background-color : skyblue ; }

또는 input 요소중 type="txt"요소를 예를들면

ex) input[type="txt"] { 속성:속성값 ;} 이런식이 되겠습니다.

[속성 ~=값] 형식

-이 선택자를 사용하면 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다. 이때 틸트 ~ 를 함께 사용하여 [속성~=값]선택자를 사용하면 비교할 값이 여러개일 경우 그중 하나만 일치해도 스타일을 적용합니다.

ex) [속성 ~=값] {속성: 속성 값; ... }

다음예는 class속성에서 "button"이라는 값이 포함된 요소의 스타일을 정의한 것입니다. 이선택자는 class="button"처럼 값이 정확하게 일치하거나 calss=" flat button"처럼 여러 속성 값을 공백으로 구분해서 나열해 놓았을 경우도 적용이 됩니다. 

% class="flat-button" or class="buttons" 이러한 것들은 안됨. !

ex) [class ~= "button"] {border-radius:10px;}   (사용가능)

[속성$=값]형식

-속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다 단 $기호가 붙으면 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용합니다. 

즉, 확장자등에 대한 스타일을 넣어 이미지나 아이콘등을 표시하고 꾸밀 수 있습니다.

ex) a [href $=".zip"] {background : url (zip_icon.gif) }

[속성 |=값] 형식

-속성이 지정한 값으로 시작하면 스타일을 적용합니다.

ex) [ 속성 |= 값 ] { 속성:속성 값; }

다음예는 <a>태그로 링크를 건 부분 중 class 이름이 "red"로 시작하는 모든 요소에 red.jpg그림을 배경 이미지로 넣은 것입니다.

이 선택자는 정확하게 일치하거나 class="red-bg"처럼 하이픈으로 연결해 한단어로 일치할 경우에도 사용이 가능합니다.

ex) a [class |= "red" ] {background :url (red.jpg) ;}

[속성 *=값] 형식

-속성 값의 앞부분을 체크하거나 뒷부분을 체크하는 선택자도 있지만, 이 선택자는 사용자가 지정한 속성 값의 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용됩니다.

ex) [속성 *= 값] { 속성:속성값; }

다음 예는 <p>태그의 class 이름 중 accent가 들어가 있는 곳에 스탕타일을 정의한 것입니다.

ex)p [class *="accent" ] {font-style : italic; }

또는 <li> 태그의 title 속성 값에서 "2011"이라는 글자가 들어간 요소들을 찾고 싶다면

ex) li [title *= "2011" ] {font - weight : 700; }