naver google
- <a>를 사용하다가 원하는 앵커만 스타일링을 하고 싶을 때 사용
<!-- HTML코드 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<a href="naver.com">naver</a>
<a href="google.com">google</a>
<a> Empty </a>
</body>
</html>
<a> 내에 href 가 있는 태그만 선택하고 싶은 경우
a[href] {
color: red;
}- a [href]을 사용하면 <a> 중 href가 있는 것만 선택할 수 있다.
<a> 내에 특정 경로가 들어있는 태그만 스타일링하고 싶은 경우
a[href="google.com"] {
color: red;
}
<a> 내에 특정 경로로 시작 /끝인 것만 스타일링하고 싶은 경우
/* 특정 경로로 시작하는 것*/
a[href^="google"] {
color: red;
}
/* 특정 경로로 끝나는 것 */
a[href$=".com"] {
color: red;
}- 시작하는 건 href^를 사용하고, 끝나는 건 href$를 사용한다.
'STUDY > CSS' 카테고리의 다른 글
| CSS : float & clear (0) | 2022.08.02 |
|---|---|
| CSS : Background 배경 (0) | 2022.08.02 |
| CSS : box-sizing (0) | 2022.08.01 |
| CSS : Box Model (박스 모델) (0) | 2022.08.01 |
| CSS : display & border (0) | 2022.07.20 |