본문 바로가기

Web/css

8. 속성 선택자

728x90

 

 

 

✔️ 속성 선택자

속성 선택자(Attribute Selector)는 특정 HTML 요소가 특정 속성을 가지고 있는지 여부에 따라 해당 요소를 선택하는 CSS 선택자이다. 속성 선택자는 대괄호 [] 안에 속성 이름과 속성 값 또는 일치하는 부분을  지정하여 사용된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        [href] { text-decoration: none; color: deeppink; }
        .attr { background-color: gold; }
        [class='attr'] { font-size: 30px; }
        [title] { text-align: center; font-size: 50px;}
    </style>
</head>
<body>
    <h2 title="h2 요소의 title 속성">속성 선택자</h2>
    <p><a href="https://www.naver.com" target="_blank">네이버</a></p>
    <p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>

 

 

                                               👇

 

 

 

728x90

'Web > css' 카테고리의 다른 글

7. 일반 인접 형제 선택자  (0) 2024.07.22
6. 자식 자손 선택자  (0) 2024.07.22
5. 그룹 선택자  (0) 2024.07.22
4. class 선택자  (0) 2024.07.19
3. id 선택자  (0) 2024.07.19