Programming/CSS
[CSS] 가상 클래스: 속성 선택자
Isaac S. Lee
2023. 9. 26. 14:58
🍁속성 선택자
속성 이름이나 속성 값으로 태그를 찾을 수 있다.
[CSS] CSS Seletor (CSS 선택자) 2
🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제
isaac-christian.tistory.com
의사 클래스 (Pseudo Class)에서 이어진다.
1. 선택자[속성명]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list a {
color: black;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
a[target] {
color: red;
}
</style>
</head>
<body>
<div class="list">
<a href="http://naver.com" target="_self">네이버</a>
<a href="http://yes24.com" target="_blank" title="링크">예스24</a>
<a href="https://daum.com">다음</a>
<a href="https://11st.co.kr">11번가</a>
<a href="https://isaac-christian.tistory.com" target="_blank">아이작의 블로그</a>
</div>
</body>
</html>
a[target]은 a를 사용한 모든 target을 찾아서 서식을 적용한다.
target은 해당 속성을 보유하고 있는 태그를 찾으라는 의미이다.
2. 선택자[속성명=값]
a[target=_blank] {
color: red;
}
target을 _blank로 지정한 네이버만을 제외하고 target으로 찾는다.
3. 선택자[속성명^=값]
a[href^='http://'] {
color: red;
}
속성값의 일부만을 가지고 찾는 게 캐럿 이퀄('^=')이다.
속성값의 앞 부분에서 해당 값을 가지고 있는 것들을 target으로 찾는다.
4. 선택자[속성명$=값]
a[href$='.com'] {
color: red;
}
'$='는 속성값의 뒷부분에서 해당 값을 가지고 있는 것들을 target으로 찾는다.
5. 선택자[속성명*=값]
a[href*=co] {
color: red;
}
'*='는 와일드카드이다.
해당 내용을 속성이 가지고 있다면 target으로 찾는다.
