기본 선택자
가장 기본적인 선택자로 요소를 호출할 때 사용합니다.
전체 선택자 *
HTML문서 내부의 모든 요소를 선택하는 선택자
* {
color: skyblue;
}
태그 선택자
태그 이름을 선택하는 선택자
<li>노란색</li>li {
background-color: yellow;
color: blue;
}
클래스 선택자
HTML clss 속성의 값 선택자
<li class="red">빨간색</li>
<li class="orange">주황색</li>.red {
background-color: red;
}
.orange {
background-color: orange;
}
아이디 선택자
id 속성의 값 선택
<p id="green_i">초록색</p>#green_i {
background-color: green;
}
선택자 우선순위 : 전체 < tag < class < id
<!DOCTYPE html>
<html lang="en">
<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>선택자 우선 순위</title>
<style>
/* 선택자 우선순위 : 전체 < tag < class <id */
/* 전체선택자 */
* {
color: skyblue;
}
/* 태그 선택자 */
li {
background-color: yellow;
color: blue;
}
/* 클래스 선택자 */
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.green_c {
background-color: blue;
}
/* 아이디 선택자 */
#green_i {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">빨간색</li>
<li class="orange">주황색</li>
<li>클래스 지정 X</li>
</ul>
<h3>하늘색</h3>
<p id="green_i" class="green_c">초록색</p>
</body>
</html>li 태그에는 노란색 백그라운드가 정해져있지만 빨간색과 주황색은 클래스 선택자로 backgroud-color 가 지정되어있기때문에 빨간색과 주황색으로 나타납니다.
id 태그(green)와 class 태그(blue)가 같이 있는 초록색은 id의 우선 순위가 더 높기때문에 id 태그의 초록색이 background color 로 나타납니다.
복합 선택자
기본 선택자만으로 선택이 불가능할 때 사용합니다.
일치 선택자
이름이 동일한 선택자가 있을 때, 특정한 선택자를 선택할 수 있는 선택자입니다.
<div class="zoo">
<ul>
<span>여긴 사파리!</span>
<li>곰</li>
<li id="tiger">호랑이</li>
<li>팬더</li>
<span class="lion">사자1</span>
<li class="lion">사자2</li>
<li>사육사 allie</li>
<li>사육사 진형</li>
</ul>
<span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>lion 클래스 중 p 태그 lion만 선택해서 야생의 사자만 red가 적용됩니다.
p.lion {
background-color: red;
}하위(후손) 선택자
띄어쓰기를 사용해 선택자가 아닌 선택자의 하위 요소를 선택합니다.
<div class="zoo">
<ul>
<span>여긴 사파리!</span>
<li>곰</li>
<li id="tiger">호랑이</li>
<li>팬더</li>
<span class="lion">사자1</span>
<li class="lion">사자2</li>
<li>사육사 allie</li>
<li>사육사 진형</li>
</ul>
<span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>하위 선택자로 띄어쓰기를 적용해서 사파리 안<ul>의 사자만 greenyellow 적용과 동물원 안<zoo>의 사자만 폰트가 두껍게 게 나타납니다.
ul> .lion {
background-color: greenyellow;
}
.zoo .lion {
font-weight: bold;
}인접 형제 선택자
선택자의 다음 형제 선택자를 선택합니다.
<div class="zoo">
<ul>
<span>여긴 사파리!</span>
<li>곰</li>
<li id="tiger">호랑이</li>
<li>팬더</li>
<span class="lion">사자1</span>
<li class="lion">사자2</li>
<li>사육사 allie</li>
<li>사육사 진형</li>
</ul>
<span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>id 태그 tiger 다음 선택자 팬더<li>에 skyblue가 지정됩니다.
#tiger + li {
background-color: skyblue;
}일반 형제 선택자
선택자의 다음 형제 선택자를 모두 선택합니다.
<div class="zoo">
<ul>
<span>여긴 사파리!</span>
<li>곰</li>
<li id="tiger">호랑이</li>
<li>팬더</li>
<span class="lion">사자1</span>
<li class="lion">사자2</li>
<li>사육사 allie</li>
<li>사육사 진형</li>
</ul>
<span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>사파리 안에있는 사육사 모두에게 orange 배경을 적용하고자 합니다.
lion 클래스만 생각하고 .lion ~ li 로 적용하면 span 태그 다음 모두에게 적용되기 때문에
li태그 lion 다음 선택자로 명시해주어야 합니다.
li.lion ~ li {
background-color: orange;
}
복합선택자 사용 연습
동물원에 왔어요
-
여긴 사파리!
- 곰
- 호랑이
- 팬더 사자1
- 사자2
- 사육사 allie
- 사육사 진형
야생의 사자
가상 클래스 선택자
각 요소가 사용자의 행동에 따라 다르게 적용됩니다.
:hover
- 요소에 마우스 커서가 올라가 있는 동안 선택
<div class="div1">
<p>:hover 마우스 커서가 올라가 있는 동안</p>
</div> .div1 {
width: 300px;
background-color: aquamarine;
line-height: 50px;
}
.div1:hover{
background-color: coral;
height: 250px;
cursor: pointer;
}:hover 마우스 커서가 올라가 있는 동안
:active
- 요소에 마우스를 클릭하고 있을 때 선택
<div class="div1">
<p>:active 마우스 클릭</p>
</div> .div1 {
width: 300px;
background-color: aquamarine;
line-height: 50px;
}
.div1:active{
background-color: rgb(95, 25, 236);
width: 150px;
}:active 마우스 클릭
:focus
- 요소가 포거스되면 선택
<input type="text" /> input:focus{
background-color: rgb(229, 208, 250);
color: beige;
outline-color: rgb(178, 48, 239);
}:first-child
- 선택자가 형제 요소 중에서 첫번째 요소라면 선택
li:first-child{
background-color: black;
}
:last-child
- 선택자가 형제 요소 중에서 마지막 요소라면 선택
li:last-child{
background-color: black;
}
:nth-child(n)
- 선택자가 형제 요소 중 n번째라면 선택
li:nth-child(2){
background-color: black;
}
:not()
- 선택자가 아닌 요소 선택
.lion *:not(span){
background-color: black;
}
가상 요소 선택자
선택된 요소의 앞, 뒤, 별도의 content 속성을 사용해 삽입할 수 있습니다. content에는 빈값이라도 ("") 넣어주어야 합니다.
::before
- 선택자 요소 내부 앞에 내용 삽입
.div::before{
content: '앞';
}
::after
- 선택자 요소 내부 뒤에 내용 삽입
.div:hover::after{
content: '뒤';
color: white;
}
속성 선택자
지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자입니다.
특성속성만 지정하거나 속성과 속성의 값을 지정합니다.
[type='password']{
font-size: 60px;
background-color: gray;
}<input type="password" >'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
| [포스코X코딩온] CSS_04 position & backgound (0) | 2023.03.07 |
|---|---|
| [포스코X코딩온] CSS_03 속성 정리 (0) | 2023.03.06 |
| [포스코X코딩온] CSS_01 적용 방식 (0) | 2023.03.03 |
| [포스코X코딩온] HTML_02 <table> 태그 & Semantic (0) | 2023.03.03 |
| [포스코X코딩온] HTML_01 구조 설명 & tag (0) | 2023.03.02 |