Front-End/HTML & CSS
[CSS3] 선택자란?, 자주 쓰는 선택자들
You_mool
2024. 2. 2. 18:18
반응형
1. 하위 선택자 (Descendant Selector): 공백으로 구분된 두 선택자를 사용하여 앞의 선택자에 의해 선택된 요소의 하위 요소를 선택합니다.
예: div p - div 요소 내의 모든 p 태그를 선택
2. 자식 선택자 (Child Selector): > 기호로 구분된 두 선택자를 사용하여 앞의 선택자에 의해 선택된 요소의 직계 자식 요소를 선택합니다.
예: div > p - div 요소의 직접적인 자식인 p 태그를 선택
3. 인접 형제 선택자 (Adjacent Sibling Selector): + 기호로 구분된 두 선택자를 사용하여 첫 번째 선택자 바로 다음에 오는 두 번째 선택자를 선택합니다. 두 선택자는 동일한 부모를 공유해야 합니다.
예: h1 + p - h1 태그 바로 다음에 오는 p 태그를 선택
4. 일반 형제 선택자 (General Sibling Selector): ~ 기호로 구분된 두 선택자를 사용하여 첫 번째 선택자 이후의 모든 두 번째 선택자를 선택합니다. 두 선택자는 동일한 부모를 공유해야 합니다.
예: h1 ~ p - h1 태그 다음에 오는 모든 p 태그를 선택
5. 속성 선택자 (Attribute Selector): 대괄호([]) 안에 속성 이름을 넣어 해당 속성을 가진 요소를 선택합니다.
코드 예시 :
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: red;
}
div > p {
font-size: 20px;
}
h1 + p {
color: blue;
}
h1 ~ p {
text-decoration: underline;
}
a[href] {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>하위 선택자와 자식 선택자에 의해 선택된 텍스트</p>
</div>
<h1>헤더</h1>
<p>인접 형제 선택자와 일반 형제 선택자에 의해 선택된 텍스트</p>
<a href="#">속성 선택자에 의해 선택된 텍스트</a>
</body>
</html>
결과 화면 :
반응형