선택자
1. 전체선택자 *
- HTML 문서 내부의 모든 요소를 선택
2. HTML 요소 선택자
- 이름만 불러오면 됨
3. 아이디(id) 선택자
- id값은
#으로 불러옴
4. 클래스(class) 선택자
- class값은
.으로 불러옴
결합선택자
1. 자손 선택자(descendant selector)
div p {스타일;}- 이렇게 태그 2개를 띄어쓰기 하고 그냥 쓰면 됨. 쓴 태그를 모두 선택하는 것
- div 내부만 선택되고 외부는 선택되지 않음
<h1>자손 선택자를 이용한 선택</h1>
<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
<div>
<p>div 태그 내부의 p 태그만 선택됩니다!</p> 🔴
<p>div 태그 내부의 p 태그만 선택됩니다!</p> 🔴
<p>div 태그 내부의 p 태그만 선택됩니다!</p> 🔴
</div>
<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>2. 자식 선택자(child selector)
div > p {스타일;}- 하위 요소 중에서 태그 바로 밑의 p태그만
<div>
<p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p> 🔴
<p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p> 🔴
<span>
<p>이 p 태그는 span 태그로 둘러 쌓여 있습니다.<br>
따라서 div 태그 바로 밑에 존재하는 p 태그가 아니므로 선택되지 않습니다!
</p>
</span>
</div>동위 선택자(sibling selector)
1. 일반 동위 선택자(general sibling selector)
div ~ p {스타일;}- 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택
<h1>일반 동위 선택자를 이용한 선택</h1>
<p>이 p 태그는 div 태그의 sibling 이지만 div 태그보다
앞에 나오기 때문에 스타일 적용은 안 된다!</p>
<div>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
<p>이 p 태그는 div 태그의 sibling 입니다!</p> 🔴
<p>이 p 태그는 div 태그의 sibling 입니다!</p> 🔴2. 인접 동위 선택자(adjacent sibling selector)
div + p {스타일;}- 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택
- 바로 붙어 있는 것 하나 각각만 말하는 것 🔴
<h1>인접 동위 선택자를 이용한 선택</h1>
<div>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>
<div>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p> 🔴
<p>이 p 태그는 div 태그의 sibling 입니다!</p>
</div>
<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p> 🔴
<p>이 p 태그는 div 태그의 sibling 입니다!</p>속성 선택자(attribute selectors)
1. 기본 속성 선택자
[속성이름] 선택자
- 특정 속성을 가지고 있는 요소를 모두 선택
<head>
<meta charset="UTF-8">
<title>CSS Attribute</title>
<style>
[title] { 🔴
background: black;
color: yellow;
}
</style>
</head>
<body>
<h1>[속성] 선택자를 이용한 선택</h1>
<h2 title="first h2">이 제목은 title 속성을 가지고 있습니다!</h2> 🔴
<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
<p title="first p">이 단락은 title 속성을 가지고 있습니다!</p> 🔴
<p title="second p">이 단락은 title 속성을 가지고 있습니다!</p> 🔴
</body>[속성이름="속성값"] 선택자
- 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택
<head>
<meta charset="UTF-8">
<title>CSS Attribute</title>
<style>
[title="first h2"] { 🔴
background: black;
color: yellow;
}
</style>
</head>
<body>
<h1>[속성="속성값"] 선택자를 이용한 선택</h1>
🔴 <h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
<p title="second p">이 단락은 title 속성값이 "second p"입니다!</p>
</body>2. 문자열 속성 선택자
①[속성이름~="속성값"] 선택자
- ["속성값"]으로 이루어진 하나의 단어를 포함하고 있는 요소 모두 선택
- 단어니까 띄어쓰기로 구분. 하이픈- 으로 연결된 것은 다른 단어임
- ex) "first" 를 찾는데 "first-p" 불가능
②[속성이름|="속성값"] 선택자
- ["속성값"]으로 이루어진 하나의 단어로만 시작하는 요소 모두 선택
- title 속성값이 정확히 "first"인 요소나 "first" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택
- 그 단어 하나만 와야한다는 것
③[속성이름^="속성값"] 선택자
- ["속성값"]으로 시작하는 요소 모두 선택. 시작하기만 하면 됨
- 단어 2개 이상이거나 -으로 연결되어 있어도 괜찮
- "first" 를 찾는데 "first-p" 가능
④[속성이름$="속성값"] 선택자
- ["속성값"]으로 끝나는 요소 모두 선택. 끝나기만 하면 됨
⑤[속성이름*="속성값"] 선택자
- ["속성값"]을 포함하는 요소 모두 선택
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀