PinkCoding

CLASS web

CSS

CSS 셀렉터 7 (속성 선택자)

CSS 셀렉터 (속성 선택자)

속성 선택자

이번엔 속성 선택자에 대해서 알아볼게요.

태그에서 사용했던 src, href, id, class, name, value 이런것을 속성이라 부릅니다.
어떠한 속성이 있는 태그에 CSS를 적용할 수 있습니다.

속성 선택자 방법

선택자[속성]{CSS속성:값}

예를 들어 나는 p태그에 있는 id속성이 있는 선택자에만 CSS를 적용하겠다 라고 하면 다음과 같습니다.

p[id]{color:skyblue}

태그 관계없이 id속성이 있는 태그에만 CSS를 적용하겠다면 다음과 같습니다.

[id]{color:skyblue}

그럼 예제를 통해서 봅시다.
p태그이면 id속성이 있는 태그는 하늘색, 태그와 관계없이 class속성이 있는 태그는 핑크색을 적용하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    p[id]{color:skyblue}
    [class]{color:hotpink}
</style>
</head>
<body>
    <p id="myName">pinkcoding</p>
    <b class="myName2">pinkcoding</b>
    <em class="myName3">pinkcoding</em>
    <p class="myName4">pinkcoding</p>
    <span class="myName5">pinkcoding</span>
    <div >pinkcoding</div>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과 이미지입니다.

p태그이면서 id속성이 있는 선택자는 하늘색으로 표시 그외에 class 속성이 있는 태그는 핑크색으로 표시됩니다.
class 속성이 없는 태그는 검은색으로 표시됩니다.

태그에 id속성이 적용되어있지만 class속성도 적용되면 어떤 색이 나올지 한 번 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    [id]{color:skyblue}
    [class]{color:hotpink}
</style>
</head>
<body>
    <p id="myName" class="myName2">pinkcoding</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

이미지와 같이 나중에 선언된 핑크색이 적용됩니다. 순서를 바꿔 볼까요 이번엔 id속성 선택자를 나중에 둘게요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    [class]{color:hotpink}
    [id]{color:skyblue}
</style>
</head>
<body>
    <p id="myName" class="myName2">pinkcoding</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

이번에는 id 속성 선택자를 나중으로 했습니다. 결과는 다음가 같이 하늘색이 나옵니다.

하지만 다음과 같이 태그까지 지정을 해주면 먼저 선언했더라도 태그까지 지정한 선택자가 적용됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    p[class]{color:hotpink}
    [id]{color:skyblue}
</style>
</head>
<body>
    <p id="myName" class="myName2">pinkcoding</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

태그명까지 같이 붙여주니 핑크색으로 표시됩니다. 우선 사항을 알 수 있는 부분이죠. ^^

이번엔 속성의 값까지 체크하여 CSS를 적용해 봅시다.

속성 선택자 값체크 방법 (정확히 속성의 값이 일치)

선택자[속성="값"]{CSS속성:값}

다음은 p태그에서 class속성의 값이 myName이면 CSS를 적용하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href="https://www.pinkcoding.com"]{color:hotpink;text-decoration:none}
</style>
</head>
<body>
    <a href="https://www.pinkcoding.com">pinkcoding</p>
    <a href="https://www.tomodevel.jp">tomodevel</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과입니다. 정확히 속성 값이 일치하는 경우입니다.

속성 선택자 값체크 방법 (특정 문구로 시작)

다음은 특정 문구로 시작하는 경우입니다. ^=를 사용합니다.

선택자[속성^="값"]{CSS속성:값}

다음은 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href^="https://"]{color:hotpink;text-decoration:none}
</style>
</head>
<body>
    <a href="https://www.pinkcoding.com">pinkcoding</p>
    <a href="https://www.tomodevel.jp">tomodevel</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과입니다. 속성의 값이 특정문구로 시작하는 경우입니다.

속성 선택자 값체크 방법 (특정 문구로 끝나)

다음은 특정 문구로 끝나는 경우입니다. $=를 사용합니다.

선택자[속성$="값"]{CSS속성:값}

다음은 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href$=".com"]{color:hotpink;text-decoration:none}
</style>
</head>
<body>
    <a href="https://www.pinkcoding.com">pinkcoding</p>
    <a href="https://www.tomodevel.jp">tomodevel</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과입니다. 속성의 값이 특정문구로 끝나는 경우입니다.

속성 선택자 값체크 방법 (특정 문구 포함)

다음은 특정 문구가 포함되는 경우입니다. *=를 사용합니다.

선택자[속성*="값"]{CSS속성:값}

다음은 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href*="tomodevel"]{color:hotpink;text-decoration:none}
</style>
</head>
<body>
    <a href="https://www.pinkcoding.com">pinkcoding</p>
    <a href="https://www.tomodevel.jp">tomodevel</p>
    <a href="http://www.startwebcoding.com">Start Web Coding</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과입니다. 속성의 값이 특정문구가 포함되는 경우입니다.

특정문구를 http로 변경해보면 3개의 태그 모두 적용됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>속성 클래스</title>
<style>
    a[href*="http"]{color:hotpink;text-decoration:none}
</style>
</head>
<body>
    <a href="https://www.pinkcoding.com">pinkcoding</p>
    <a href="https://www.tomodevel.jp">tomodevel</p>
    <a href="http://www.startwebcoding.com">Start Web Coding</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

다음은 결과입니다. 속성의 값이 특정문구가 포함되는 경우입니다.