CSS-선택자(selector)2 : 속성선택자

선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의

1. 속성 선택자(Attribute Selector)

속성 값	설명
h1[class]	class명을 가진 h1 요소
img[alt]	alt 속성을 가진 img 요소
p[class="abc"]	class명이 유일하게 'abc'인 p 요소
p[class~="abc"]	class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'로 시작하는 p 요소
p[class\|="abc"]	class명이 'abc'이거나 'abc~로 시작하는 p 요소
p[class^="abc"]	class명이 철자'abc'로 시작하는 p 요소
p[class$="abc"]	class명이 철자'abc'로 끝나는 p 요소
p[class*="abc"]	class명이 철자'abc'가 포함되어 있는 p 요소
a[href^="mailto"]	href 속성값이 'mailto'로 시작하는 a 요소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Attribute Selector</title>
    <style>
        h3[class]{text-decoration: underline}  /* 셀렉터[어트리뷰트] */
        p[class="abc"]{color:blue} /* 셀렉터[어트리뷰트=”값”] */
        p[class~="abc"]{font-weight: bold} /* 셀렉터[어트리뷰트~=”값”] */
        p[class|="abc"]{background-color: lightcyan} /* 셀렉터[어트리뷰트|=”값”] */
        p[class^="abc"]{border: 1px solid red} /* 셀렉터[어트리뷰트^=”값”] */
        p[class$="abc"]{font-size: 25px} /* 셀렉터[어트리뷰트$=”값”] */
        p[class*="abc"]{font-style: italic} /* 셀렉터[어트리뷰트*=”값”] */
    </style>
</head>
<body>
    <h3>속성 선택자 (class 없음)</h3>
    <h3 class="title">속성 선택자 (class 있음)</h3>
    <p>class 없는 p요소</p>
    <p class="abc">class명이 abc인 p 요소</p>
    <p class="abcde">class명이 abcde인 p 요소</p>
    <p class="12abc">class명이 12abc인 p 요소</p>
    <p class="34 abc yz">class명이 34, abc, yz인 p 요소</p>
    <p class="abc-1">class명이 abc-1인 p 요소</p>
</body>
</html>

Attribute Selector

속성 선택자 (class 없음)

속성 선택자 (class 있음)

class 없는 p요소

class명이 abc인 p 요소

class명이 abcde인 p 요소

class명이 12abc인 p 요소

class명이 34, abc, yz인 p 요소

class명이 abc-1인 p 요소

저작자표시

'CSS' 카테고리의 다른 글

CSS-Font & Text (0)	2020.08.10
CSS-선택자(selector)4 : 가상요소 선택자 (0)	2020.08.08
CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자 (0)	2020.08.07
CSS-선택자(selector) (0)	2020.08.06
CSS란? (0)	2020.08.06