HTML·CSS
[CSS] 선택자
최성2
2022. 2. 3. 04:20
선택자
: 특정 태그를 선택, 해당 태그의 속성을 변경하는 목적으로 사용
div {
tag 선택자: 특정 태그를 선택하여 적용;
}
* {
* 선택자: 문서 전체 선택, 초기 세팅 값을 잡을 때 많이 사용;
}
input[type=text] {
속성 선택자: tag의 속성을 선택하여 적용;
}
id와 class: html에서 지정 > css에서 속성 설정
<div id="wrap">
<h1><h1>
<p class="content"><p>
</div>#wrap {
id: #
}
.content {
class: .
}
#wrap.content {
tag, id, class 혼합 가능
}
후손 및 자손 선택자
<div id="header">
<div class="logo">
<h1></h1> 👈
<ul>
<li><h1></h1></li> 👈
</ul>
</div>
</div>div li {
후손 선택
}
div > h1 {
자손 선택
}
동위 선택자(+, ~)
: 동등한 위치를 판단하여 css 속성 설정
<h1 id="title"></h1>
<div></div>
<div></div>
<div></div>h1~div {
h1과 동등한 위치의 태그 중 div란 div는 전부 선택;
}
h1+div {
h1과 동등한 위치의 태그 중 가장 가까운(아래쪽) div만 선택;
}
반응, 상태 선택자
h1:hover {
마우스를 올렸을 때 반응해라
}
input:focus {
포커스 될 때 상태를 변경해라
}
input:enabled {
활성화 될 때 상태를 변경해라
}
구조 선택자
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>ul li {
ul 안 li 전체
}
ul li:nth-child(2n) {
ul 안 li 중 짝수만
}
ul li:first-of-type {
ul 안 li 중 첫 번째
}
ul li:last-of-type {
ul 안 li 중 마지막
}
문자 선택자
h1:first-letter {
h1의 첫 번째 글자만
}
h1:first-line {
h1의 첫 번째 줄만
}
#content p:first-child::selection {
content의 첫 번째 p태그를 선택할 때 반응해라
}
링크 선택자
#content a::after {
content: '-' attr(href);
링크 뒤에 - url 추가(?)
}
부정 선택자
#content li:not(.fa) {
li 중 class="fa"가 없는 li 선택
}
----
div[class="one"]
: 정확히 일치하는 클래스만 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3일차_보강_설명 2</title>
<style>
div[class="one"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>1</div>
<div class="one">2</div> 👈
<div class="one two">3</div>
<div class="one two three">4</div>
<div class="onetwo three">5</div>
<div class="one-two three">6</div>
<div class="twoonethree">7</div>
</body>
</html>
div[class~="one"]
: one 이라는 단어가 정확히 들어간 클래스만 적용
: one-two, onetwo, one.two 등 사족(?)을 붙인 것은 허용하지 않는다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3일차_보강_설명 2</title>
<style>
div[class~="one"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>1</div>
<div class="one">2</div> 👈
<div class="one two">3</div> 👈
<div class="one two three">4</div> 👈
<div class="onetwo three">5</div>
<div class="one-two three">6</div>
<div class="twoonethree">7</div>
</body>
</html>
div[class*="one"]
: one이 포함된 클래스 전부 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3일차_보강_설명 2</title>
<style>
div[class~="one"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>1</div>
<div class="one">2</div> 👈
<div class="one two">3</div> 👈
<div class="one two three">4</div> 👈
<div class="onetwo three">5</div> 👈
<div class="one-two three">6</div> 👈
<div class="twoonethree">7</div> 👈
</body>
</html>