속성관련 선택자
[속성] : 속성을 가지는 선택자
[속성=value] : 속성의 값이 value와 일치하는 선택자
[속성~=value] : 속성의 값중 value를 포함하는 선택자
[속성^=value] : 속성의 값이 value로 시작하는 선택자
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> /* [속성] : 속성을 가지는 선택자 */ p[title] { color: gray; font-size: 1.3em; font-weight: bold; } /* [속성=value] : 속성의 값이 value와 일치하는 선택자 */ p[name=apple] { color: red; font-size: 1em; } /* [속성~=value] : 속성의 값중 value를 포함하는 선택자 */ p[name~=banana] { color: green; font-size: 1em; } /* [속성^=value] : 속성의 값이 value로 시작하는 선택자 */ p[name^=value] { color: blue; font-size: 1em; } </style> </head> <body> <p title="타이틀">과일들</p> <p name="apple">Apple = 사과</p> <p name="Banana, banana">Banana = 바나나</p> <p name="peach">Peach = 복숭아</p> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 :first-letter, :first-line 선택자 (0) | 2017.05.29 |
|---|---|
| HTML5/CSS3 :before, :after 선택자 (0) | 2017.05.28 |
| HTML5/CSS3 인접 형제 선택자, 형제 선택자 (0) | 2017.05.26 |
| HTML5/CSS3 :root 선택자 : body태그 보다 위의 최상위 선택자 (0) | 2017.05.25 |
| HTML5/CSS3 색조,채도,명도 입력법 (0) | 2017.05.24 |