선택자(selector)란?
👉🏻요소를 선택하게 하는 이름
선택자 {
속성: 값;
속성: 값;
}
💎 기본 선택자
- 태그 선택자(태그명) 👉🏻 같은 태그명을 모두 선택
- 클래스 선택자(.클래스명) 👉🏻 같은 클래스를 가지는 모든 태그
- id 선택자(#id명) 👉🏻 한 문서 내에서 무조건 한 개만 사용(고유)
💎 가상 선택자
- 선택자:가상클래스명
- 어떤 조건이나 상황에서 스타일을 적용하도록 만든 선택자
- 앞에 다른 선택자가 오고, 뒤에 가상클래스 선택자가 추가로 나옴
- :hover 👉🏻 요소에 마우스를 올렸을 때
- :focus 👉🏻 요소가 포커스를 받고 있을 때
- :nth-child(a) 👉🏻 a번째 자식 요소 / :nth-of-type(a) 👉🏻 같은 타입 중 a번째
- a번째에 해당하는 요소
- 1 : 첫번째 요소
- even : 짝수 요소
- odd : 홀수 요소
- 2n, 3n, 5n : 배수 요소
- 연산도 가능(2n-1)
- :first-child 👉🏻 첫번째 요소
- :last-child 👉🏻 마지막 요소
- :after 👉🏻 요소 뒤에 가상요소를 삽입
- :before 👉🏻요소 앞에 가상요소를 삽입
💎 선택자 조합
- 여러 선택자를 이용하여 요소를 선택
- 자식관계 (>)
- 선택자1 > 선택자2 > 선택자3 (table>thead>tr>td)
- 조상관계 (공백)
- 선택자1 선택자2 (table td)
- 선택자1은 선택자2의 바로 위 조상일 수도 있고, 한참 위 조상일 수도 있음.
- 본인 : 선택자를 붙여서 사용
- 선택자1.선택자2
- 선택자1과 선택자2를 모두 만족하는 요소(and)
- (div.a) (.a.b) (div#c)
- 불가능한 조합
- divinput ❌ , .ainput ❌ : 띄어쓰기를 안하면 구분이 안되는 조합
- #a#b ❌ : 말이 안되는 조합
- 선택자1, 선택자2 : 선택자1과 선택자2 모든 태그(or)
💎 선택자 우선순위
아이디 선택자 > 클래스 선택자 > 태그 선택자
💡우선순위가 같다면 아래쪽 스타일이 우선 적용
📝 예제
<style>
section {
color: navy;
}
article {
color: brown;
}
.a {
font-weight: 700;
}
article.a {
font-style: italic;
}
article, .a {
background-color: skyblue;
}
section:hover {
color: blanchedalmond;
}
#red {
color: crimson;
}
</style>
<body>
<section class="a">Hello Hong Gil Dong</section>
<section id="red">안녕하세요. 홍길동입니다</section>
<section>안녕하세요. 순이입니다.</section>
<article class="a">Hello</article>
<article>Hi</article>
</body>📝 결과
📝 가상 선택자 예제
<style>
li.links a::after {
content: " /";
}
ul a.last::after {
content: "";
}
.links {
text-decoration: dashed;
}
</style>
<ul>
<li class="links">
<a href="#">naver1</a>
<a href="#">naver2</a>
<a href="#">naver3</a>
<a href="#">naver4</a>
<a href="#" class="last">naver5</a>
</li>
</ul>📝 결과
💡::after는 시각적으로만 추가되고, 실제 DOM에 존재하지 않음.
📝 :first-child, :nth-child(), :nth-of-type() 비교
<style>
/* ol 안에서 첫 번째 li만 빨간색 */
ol > li:first-child {
color: red;
}
/* ol 안에서 짝수 번째 li는 파란색 */
ol > li:nth-child(even) {
color: blue;
}
/* ol 안에서 li 중 3의 배수 번째 li는 주황색 */
ol > li:nth-of-type(3n) {
color: coral;
}
/* div 안에서 p 중 두 번째 p만 빨간색 */
div > p:nth-of-type(2) {
color: red;
}
/* div 안에서 두 번째 자식 요소가 p면 빨간색 (이 구조에선 적용 안 됨) */
/* div > p:nth-child(2) {
color: green;
} */
</style>
<!-- 리스트 요소 테스트 -->
<ol>
<li>1번</li>
<li>2번</li>
<li>3번</li>
<li>4번</li>
<li>5번</li>
<li>6번</li>
<li>7번</li>
<li>8번</li>
<li>9번</li>
<li>10번</li>
</ol>
<!-- 요소 순서와 타입 비교 -->
<div>
<h1>제목</h1>
<p>요소 1</p>
<p>요소 2</p>
<p>요소 3</p>
</div>📝 결과
- 1번
- 2번
- 3번
- 4번
- 5번
- 6번
- 7번
- 8번
- 9번
- 10번
제목
요소 1
요소 2
요소 3
💎 속성 선택자
- 태그가 가지고 있는 속성을 선택하는 문법
- input, button 등의 form요소에서 주로 사용
선택자[속성=값] {
스타일;
}
📝 예제
<style>
input[type=password]{
background-color: aqua;
}
button[type=submit]:hover{
background-color: brown;
}
button.btn:hover{
background-color: salmon;
}
</style>
<form action="">
<div>
<label for="id">User ID: </label>
<input type="text" name="id" id="id" placeholder="8자 이상" required>
</div>
<div>
<label for="pw">User PW:</label>
<input type="password" id="pw" name="pw" required>
</div>
<div>
<label for="pin">User pin: </label>
<input type="password" id="pin" name="pin" required>
</div>
<button class="btn" type="submit">login</button>
</form>
<button type="button">button</button>
<button type="submit">submit</button>📝 결과