태그에 적용된 속성을 선택해서 스타일을 적용할 수 있다.
위 설명은 좀 애매하지만... 예제에 적용된 코드를 보면 한 번에 알 수 있다.
먼저 태그 선택자를 이용해 모든 a의 글씨를 회색으로 바꾸고 밑줄을 없애보자.
1 2 3 4 | .ex-code-box a{ color: #333; text-decoration: none;/* 밑줄 없애기 */ } | cs |
이번엔 target 속성이 들어있는 태그를 선택해 글씨 색을 빨갛게 만들자.
이때 속성의 값은 상관이 없다. 해당 속성이 들어있기만 하면 된다.
속성을 선택할 땐 다음과 같이 태그 뒤에 대괄호를 이용한다.
1 2 3 | .ex-code-box a[target]{ color: red; } | cs |
다음은 title 속성이 있는 태그를 선택해 글씨를 굵게 만들고 배경색을 노랗게 칠해보자.
1 2 3 4 | .ex-code-box a[title]{ font-weight: bold;/* 글씨 굵게 */ background-color: yellow; } | cs |
속성을 선택하려면 태그 안에 해당 속성이 있어야한다.
속성 값은 공백으로 두면 안 된다. 유효성 검사에서 걸린다..
속성뿐만 아니라 속성 안에 들어있는 값을 선택해 좀 더 구체적으로 스타일을 적용할 수 있다.
방법은 크게 4가지가 있다.
= (일치)
특정 키워드와 완전히 일치하는 값을 찾는다.
^= (시작)
특정 키워드로 시작하는 값을 찾는다. 캐럿이라고 부른다.
$= (끝)
특정 키워드로 끝나는 값을 찾는다. 달러라고 부른다.
*= (포함)
특정 키워드가 포함된 값을 찾는다. 에스터리스크라고 부른다.
그럼 이제 예제에 적용시켜보자.
태그 선택자를 이용해 a의 디폴트 스타일을 제거한 후 글자를 어두운 노란색으로 변경한다.
1 2 3 4 | .ex-wrap2 a{ text-decoration: none; color: #5c5642; } | cs |
이번엔 title 속성 값이 '조리산업'으로 시작하는 a의 글자색과 배경색을 변경해보자. 글씨도 굵게!
1 2 3 4 5 | .ex-wrap2 a[title^="조리산업"]{ color: #fff; background-color: tomato; font-weight: bold; } | cs |
이번엔 title 속성 값이 '기능장'으로 끝나는 태그의 스타일을 변경해보자.
1 2 3 4 5 | .ex-wrap2 a[title$="기능장"]{ color: #fff; background-color: brown; font-weight: bold; } | cs |
다음은 title 속성 값이 '제과기능사'인 것을 찾아 스타일을 적용시켜보자.
1 2 3 4 | .ex-wrap2 a[title="제과기능사"]{ background-color: greenyellow; font-weight: bold; } | cs |
마지막으로 title 속성에 '조주'가 포함된 것을 찾아 스타일을 적용시킨다.
1 2 3 4 5 | .ex-wrap2 a[title*="조주"]{ color: #fff; background-color: purple; font-weight: bold; } | cs |
끝... 힘들다...