선택자 종류
- 크게 기본선택자, 복합선택자, 속성선택자, 가상선택자로 뉨
기본선택자 : 태그/클래스/ID 선택자
1. 태그선택자(type selector)
p {
color: blue;
font-size: 16px;
}2. 클래스 선택자(class selector)
- 구분 단위 : .*
- 클래스는 전역 속성임(모든 tag에 사용 가능)
.button {
background-color: green;
color: white;
padding: 10px;
border-radius: 5px;
}
3. ID 선택자
- 구분 단위 : #
- id는 문서 내에서 유일하게 사용되어야 함
#header {
background-color: navy;
color: white;
padding: 20px;
}
4. 결합선택자(태그/클래스/ID)
- 태그명#id명.클래스명 <- 순서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 결합선택자 : 태그명#id명.클래스명 순서*/
span.oran{
color: orange
}
#apple {
background:red;
}
.yellow.low #change.primary {
background: orange;
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<!-- 한 태그에 id, class 모두 있을 시, 관례적으로 id를 먼저 씀 -->
<li id="apple" class="red">사과</li>
<li class="red">포도</li>
<li class="oran">오렌지</li>
<li class="red">체리</li>
</ul>
<div class="yellow">
당근
</div>
<p>토마토</p>
<!-- css 에서 span.oran에 style 적용 -->
<span class="oran">오렌지</span>
</div>
<!-- .yellow.low#change.primary 스타일 적용 -->
<div class="yellow low">
<div id="change" class="primary">오렌지</div>
</div>
.yellow.low #change.primary
</body>
</html>복합선택자 : 자식,부모,후손,자식,형제 선택자
-
부모 태그
-정의 : 자식 부모를 감싸고 있는 "직속" 태그
-기타 : 조상태그>부모태그 -
조상 태그 : 특정 태그의 부모, 조부모, 그리고 그 위의 모든 태그를 포함하는 개념. 조상>부모
- 복합선택자의 경우, 가장 마지막 선택자가 스타일 타겟이며 그 앞은 전부 조건임
- 자식 태그(>)
-정의: 특정 태그의 "바로 아래" 위치한 태그
-구분기호 : >
-기타: 후손태그>자식태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* - 자식 선택자 기호 : ">"
가장 마지막 선택자가 스타일 타겟, 그 앞은 전부 조건임 */
div > ul > .oran {
background: orange;
}
div > div#change {
background: orangered;
}
body > div > ul > #apple {
background: lightblue;
}
#circle > h1.title > .left.low > .mango {
font-size: 32px;
color: yellowgreen;
}
body > header > .rotate > span.kiwi {
background: green;
}
</style>
</head>
<body>
<!-- 일치선택자 소속? 자식선택자에 후속 선택자 포함? -->
<!-- (연습문제) span.class에 스타일 적용되도록 코드 짜기 -->
<header>
<h class="rotate">
<span class="kiwi">키위</span>
</h>
</header>
<!-- (연습문제) div > .oran 에 스타일 적용되도록 코드 짜기-->
<div id="circle" class="mango">
<h1 class="title">
<p class="left low">
<span class="mango">망고</span>
</p>
</h1>
</div>
<div>
<ul>
<li id="apple" class="red">사과</li>
<li class="red">포도</li>
<li class="oran">오렌지</li>
<li class="red">체리</li>
</ul>
<div id="change" class="yellow">
당근
</div>
<p>토마토</p>
<span class="oran">오렌지</span>
</div>
</body>
</html>- 후손 태그(공백) : 특정 태그의 하위에 위치한 모든 태그. 자식뿐만 아니라 그 자식의 자식까지 포함합니다.
-구분기호 : 공백
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 후손선택자 : 후손 선택자는 공백을 사용하여 표현 */
div .oran {
background: orange;
}
body ul {
/* border: 요소의 경계(테두리)를 설정하는 데 사용*/
/* attributes :
(1) 두께(1px)
(2) 테두리 스타일 (solid/실선, dashed(점선), dotted(점선), double(이중선) 등) */
/* (3) 색상 : RGB 색상, HEX COLOR 등 */
border: 1px solid #000;
}
section .low div {
font-style: italic;
color: violet;
}
</style>
</style>
</head>
<body>
<!-- (연습문제) span.class에 스타일 적용되도록 코드 짜기 -->
<header>
<h class="rotate">
<span class="kiwi">키위</span>
</h>
</header>
<!-- (연습문제) div > .oran 에 스타일 적용되도록 코드 짜기-->
<section id="circle">
<h1 class="title">
<div class="left low">
<div class="mango">망고</div>
</div>
</h1>
</section>
<div>
<ul>
<li id="apple" class="red">사과</li>
<li class="red">포도</li>
<li class="oran">오렌지</li>
<li class="red">체리</li>
</ul>
<div class="yellow">
당근
</div>
<p>토마토</p>
<span class="oran">오렌지</span>
</div>
</body>
</html>- 형제 태그
-정의 : 같은 부모 태그를 공유하는 태그
-구분기호 :
(1) 직속형제(=인접형제선택자) : +
(2) 모든형제 : ~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 형재 선택자 :
(1) + : 직속형제(=인접형제선택자)
(2) ~ : 형제 */
/* 예시 : 태그가 li 이고 바로 위 형의 클래스가 orange 인 것(결과 : 사과, 자몽에 스타일 적용됨) */
.orange + li {
background: orangered;
}
/* 예시 : 리스트의 첫 번째 행을 제외한 모든 행에 특정 스타일을 적용 */
li + li {
font-size: 10px;
}
/* 예시 : 테이블의 첫 번째 행을 제외한 모든 행에 특정 스타일을 적용 */
tr + tr {
font-family: '궁서체', cursive;
}
/* 예시 : (직속여부 상관 없이) 형 중에 .red가 있는 li(결과 : 포도, 레몬에 적용) */
.red ~ li {
background: violet;
}
/* 그룹 선택자 : 선택자 다중선택(기호 : ') */
.apple,
section .banana,
footer ul#fruit {
}
</style>
<body>
<ul>
<li class="orange">어뤠인지</li>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li>
<li class="red">자몽</li>
<li>포도</li>
<li>레몬</li>
</ul>
</body>
</html>속성선택자
- 속성선택자 : [속성명] 혹은 [속성명="속성값"] 혹은 [속성명=속성값]
-- 속성값에 특수문자가 있을 시에는 "" 생략하면 에러가 나기 때문에, 웬만하면 ""도 적어주는 게 좋긴 함]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 속성선택자 : [속성명=속성값] 혹은 [속성명=""속성값"] 혹은 [속성명] */
/* 속성값에 특수문자가 있으면 ""를 붙여야 되는 등 제한이 있기 때문에, 왠만하면 ""넣는 것으로 통일 */
/* 연습문제 : type=password에만 스타일 적용 */
[type=password] {
color:red;
}
/* 연습문제 : type에만 스타일 적용 */
[type] {
width: 120px;
height: 50px;
}
/* 연습문제 : 속성값 disabled에만 스타일 적용 */
[disabled] {
background: yellow;
}
/* 연습문제 : 태그/클래스/id선택자 + 속성선택자 조합 */
img[src] {}
.img[src] {}
#img[src] {}
</style>
</head>
<body>
<img src="#" alt="">
<audio src="#"></audio>
<div>
<input type="text" value="hello"></input>
</div>
<div>
<input type="password" value="1234"></input>
</div>
<div>
<input type="text" value="사용불가" disabled></input>
</div>
</body>
</html>가상클래스 선택자(Pseudo-class Selector)
:hover: Hover 효과는 사용자가 마우스를 특정 요소 위에 올렸을 때 스타일을 변경하는 효과:active: 클릭하고 있는 동안의 스타일을 변경하는 효과:focus: 입력창에 커서가 반짝일 때 효과-:focus: 입력창에 커서가 반짝일 때 효과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
color: orange;
}
/* 가상 클래스 선택자(Pseudo-class Selector) */
/* hover 효과 : Hover 효과는 사용자가 마우스를 특정 요소 위에 올렸을 때
스타일을 변경하는 효과 */
a:hover {
font-size: 20px;
color: red;
}
.box {
width: 100px;
height: 100px;
background: red;
/* trasition: */
transition: 0.7s;
}
/* hover 예시 : 박스 클래스에 마우스 올리면 해당 스타일 적용 */
.box:hover {
width: 200px;
background: orange;
}
/* active 효과 : 클릭하고 있는 동안의 스타일을 변경하는 효과 */
.box:active {
height: 200px;
background: yellowgreen;
}
#common {
width: 100px;
/* 약어 mt : 위 마진 */
margin-top: 20px;
/* 약어 po : 원래 위치에서 위치 조절 가능 */
position: relative;
/* padding : 내부 여백 */
padding: 30px;
/* 약어 : ot */
/* outline는 border와 달리 가시성을 높이는 용도로만 사용되어 디자인이나 레이아웃을 위해 사용하지는 않음 */
outline: none;
transition: 0.6s;
}
/* focus 효과 : 입력창에 커서가 반짝일 때 효과 */
#common:focus {
border-color: red;
width: 200px;
}
</style>
</head>
<body>
<a href="#">Hello!</a>
<!-- .box 누르면 <div class="box"> </div> 생성됨 -->
<div class="box"></div>
<input type="text" id="common">
</body>
</html>:nth-child: #번째 자식
-형식:
(1) nth-child(#) : #번째 자식. 이 때, 1개 이상을 선택하려면 nth-child(1), nth-child(2) 이렇게 따로 설정해야 함 (nth-child(1,2)는 에러)
(2) nth-child(odd), nth-child(2n-1): 홀수
(3) nth-child(even), nth-child(2n) : 쪽수
(4) 첫번째, 마지막 : first-child, last-child로도 구현 가능
(5) n의 배수만 적용 : nth-child(3n)
(6) ~#번째 자식까지만 적용 : nth-child(-n+2)
**!!!중요!!! 찾는 순서 :
#fruits li:first-child에 스타일을 적용하려 하면,
(1) fruits id를 가진 tag의 first-child들을 찾고
(2) 그 first-child들 중 li tag에만 스타일 적용하는 것임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 속성선택자 :nth-child
(1) nth-child(#) : #번째 자식. 이 때, 1개 이상을 선택하려면 nth-child(1), nth-child(2) 이렇게 따로 설정해야 함 (nth-child(1,2)는 에러)
(2) nth-child(odd), nth-child(2n-1): 홀수
(3) nth-child(even), nth-child(2n) : 쪽수
(4) 첫번째, 마지막 : first-child, last-child로도 구현 가능
(5) n의 배수만 적용 : nth-child(3n)
(6) ~#번째 자식까지만 적용 : nth-child(-n+2)
*/
/* !!!중요!!! 찾는 순서 :
#fruits의 자손들을 찾고, 그 자손 중에서 li tag인 것에만 스타일 적용 */
#fruits li:nth-child(odd) {
font-size: 20px;
}
#fruits li:nth-child(even) {
background: yellow
}
#fruits li:nth-child(3n) {
background: gray;
}
#fruits li:first-child {
color: green;
}
#fruits li:last-child {
color: yellow;
}
#fruits li:nth-child(3) {
color: blue;
}
예시 : 3번째 자식부터 스타일 적용
#fruits li:nth-child(n +3 ) {
font-size: 24px;
}
#sports p:nth-child(3) {
background: brown;
}
</style>
</head>
<body>
<!-- ul#fruits>li*7 -->
<ul id="fruits">
<li>딸기</li>
<li>망고</li>
<li>사과</li>
<li>오렌지</li>
<li>바나나</li>
<li>자몽</li>
<li>라임</li>
</ul>
<!-- nth-child 주의점 -->
<!-- 아래에 대해 style selector를 #sports div:nth-child(3)으로 쓸 경우
농구는 div가 아닌 p임으로 스타일 적용 안 됨
-> 따라서 왠만하면 nth-child는 li에서만 쓸 것 -->
<div id="sports">
<div>축구</div>
<div>야구</div>
<p>농구</p>
<div>배구</div>
<div>수영</div>
</div>
</body>
</html>선택자 우선 순위
- 선택자 우선 순위 :
- 기본적으로 구체적일수록 우선 순위가 있다는 기조
- 속성값에 !important
- inline style(tag 내 style="")
- id
- class
- 개별tag
- 부모tag(부모 tag의 style이 자동으로 상속됨)
- 동일한 요소에 대해서 스타일 여러 번 지정하면, 가장 하단의 스타일이 적용됨
- 같은 요소에 대해 여러 스타일이 적용될 경우, 더 구체적인 선택자가 우선시 됨
- 위의 순서와 상관없이 무조건 0순위로 지정하고 싶을 때 : 속성값에 !important 지정
- 기본적으로 구체적일수록 우선 순위가 있다는 기조
div {
color: blue !important;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 선택자 우선 순위 :
- 기본적으로 구체적일수록 우선 순위가 있다는 기조
0. 속성값에 !important
1. inline style(tag 내 style="")
2. id
3. class
4. 개별tag
5. 부모tag(부모 tag의 style이 자동으로 상속됨)
- 동일한 요소에 대해서 스타일 여러 번 지정하면, 가장 하단의 스타일이 적용됨
- 같은 요소에 대해 여러 스타일이 적용될 경우, 더 구체적인 선택자가 우선시 됨
*/
/* 속성값에 !important 추가 시 : 0순위 */
div {
color: blue /* !important; */
}
/* 똑같은 레벨이 두 번 반복되면 : 밑에 것이 적용됨 */
#c-y {
color: yellow;
}
#c-y {
color: red;
}
.c-g {
color: green;
}
body {
color: aqua;
}
.c-v {
color: violet;
}
#aaa h1 {
color: gray;
}
/* 승자 : #aaa div.bbb h1 */
h1 {
color: lightcoral;
}
.bbb h1 {
color: orangered;
}
#aaa div.bbb h1 {
color: burlywood;
}
div.bbb > h1 {
color: violet;
}
</style>
</head>
<body>
<!-- style 우선순위 : style -->
<div id="c-y" class="c-g" style="color:orange;">안녕하세요1</div>
<!-- style 우선순위 : id -->
<div id="c-y" class="c-g" >안녕하세요2</div>
<!-- style 우선순위 : class -->
<div class=""c-g c-v">안녕하세요3</div>
<!-- style 우선순위 : div(부모요소와 개별태그에 모두 스타일이 적용되었을 경우,
개별요소의 스타일이 우선시 됨) -->
<div>안녕하세요4</div>
<p>안녕하세요5</p>
/* 승자 : #aaa div.bbb h1 */
<div id="aaa">
<div class="bbb">
<h1>안녕하세요6</h1>
</div>
</div>
</body>
</html>