CSS 선택자
1.선택자
전체선택자
- * 전체선택자
- div 공백 * : div의 모든 후손
<!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>Document</title>
<style>
*{
color: red;
}
/* "*" 전체선택자*/
div * {
font-style: italic;
}
/* div * 은 div내에 있는 부분이라는 뜻이라서 당근은 변하지 않음,공백은 후손*/
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li>오렌지</li>
<li>딸기</li>
</ul>
</div>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</body>
</html>태그선택자
- CSS에서 바로 태그로 지목
h1,li,a,div 등..
<!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>Document</title>
<style>
h1{
background: rgb(159, 232, 144);
}
li{
color: blueviolet;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li>오렌지</li>
<li>딸기</li>
</ul>
</div>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</body>
</html>클래스선택자
- 클래스 선택자 : .클래스이름
<!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>Document</title>
<style>
/* "." 클래스를 지목하는 기호*/
.red-color{
color: red;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li>오렌지</li>
<li class="red-color">딸기</li>
</ul>
</div>
<div>당근</div>
<p class="red-color">토마토</p>
<span>오렌지</span>
</body>
</html>id선택자
- id선택자 지목 : #id
<!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>Document</title>
<style>
/* "#" id를 지목*/
#orange{
font-size: 14px;
color: orangered;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li id="orange">오렌지</li>
<li>딸기</li>
</ul>
</div>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</body>
</html>일치선택자
- span.orange : span태그이면서 클래스이름이 orange인 태그
둘다 만족해야한다.
li의 오렌지는 안바뀌고
제일 밑에 span태그의 오렌지가 바뀜.
<!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>Document</title>
<style>
span.orange{ /*일치선택자(태그+클래스)*/
font-size: 1.2em; /*기본폰트 사이즈에 1.2배*/
color: orange;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li class="orange">오렌지</li>
<li>딸기</li>
</ul>
</div>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</body>
</html>자식선택자
- ul > .orange : ul의 직속 자식인 클래스이름이 orange인 태그
<!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>Document</title>
<style>
ul > .orange{ /* > ul의 직속 자식(바로안에있어야함)*/
color: olive;
}
div > ul > li{
font-weight: bold;
}
div > ul > li > ol {
color: rgb(132, 249, 64);
}
div > h1 {
font-size: 14px;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<h1>메롱메롱</h1>
<ul>
<li>사과
<ol>
<li>1번째</li>
<li>2번째</li>
<li>3번째</li>
</ol>
</li>
<li class="orange">오렌지</li>
<li>딸기
<ol>
<li>1번째</li>
<li>2번째</li>
<li>3번째</li>
</ol>
</li>
</ul>
</div>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</body>
</html>후손선택자
- 공백으로 표시(안에 모든 후손)
- div .red-corol : div안에 모든 후손중에 클래스이름이 .red-color인 태그
<!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>Document</title>
<style>
div .red-color{ /* 공백으로 표시하면 div안에 있는 모든 후손*/
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>안녕안녕</h1>
<div>
<ul>
<li>사과</li>
<li>오렌지</li>
<li class="red-color">딸기</li>
</ul>
</div>
<div>당근</div>
<p class="red-color">토마토</p>
<span>오렌지</span>
</body>
</html>인접형제선택자
- +로 표시 바로 뒤에 요소 1개 선택
- .ornage + li : .oarnge 바로 뒤에오는 li요소 1개 (.oarnge는 1개)
- li + li : 딸기 다음 li 다 변함 ( li들이 여러개니까)
<!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>Document</title>
<style>/*.orange 바로 뒤에오는 li요소 1개*/
.orange + li {
color: cadetblue;
}
li + li { /*딸기 다음 li다 변함*/
font-size: 24px;
}
</style>
</head>
<body>
<ul>
<li>딸기</li>
<li>사과</li>
<li class="orange">오렌지</li>
<li>망고</li>
<li>포도</li>
</ul>
</body>
</html>일반형제선택자
- ~ 로 표시 지정 뒤에 모든 요소
- li ~ li : 딸기 다음 모든 li에 적용됨.
<!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>Document</title>
<style> /*지정 뒤에 모든 요소*/
.orange ~ li {
color: yellowgreen;
}
li ~ li {
background: palegreen;
}
</style>
</head>
<body>
<ul>
<li>딸기</li>
<li>사과</li>
<li class="orange">오렌지</li>
<li>망고</li>
<li>포도</li>
</ul>
</body>
</html>속성선택자
- 타입으로 가르킴
- input[disabled] : input태그 disabled
- button[class^="btn-"] : 클래스이름이 btn-로 시작하는 모든애들 (^)
- button[class$="success"] : 클래스이름이 success로 끝나는 모든애들($)
<!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>Document</title>
<style>
input[disabled]{ /*속성*/
opacity: 0.2;
} /*opacity:투명도 디폴트값 1/0으로 갈수록 투명해짐*/
input[type=password]{ /*type속성*/
color: red;
width: 100px;
}
button[class^="btn-"]{/*class이름이 btn-으로 시작하는(^,캐럿기호) 모든애들*/
font-weight: bold;
border-radius: 20px;
}
button[class$="success"]{/*class이름이 ...으로 끝나는($) 모든애들*/
background: green;
}
</style>
</head>
<body>
<input type="text" value="hello">
<input type="password" value="1234">
<input type="text" value="disable text" disabled>
<!--disabled:사용불가-->
<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
</body>
</html>