week 05 - ch03. CSS

선택자 {속성:값;}

 

<CSS 선택자>

1. 기본

1.1 전체 선택자 : 모든 요소를 선택

* {
  color: red;
}

1.2 태그 선택자 : 태그 이름이 ABC인 요소 선택

ABC

li {

}

1.3 클래스 선택자 : HTML class 속성의 값이 인ABC 요소 선택

.ABC

.클래스명 {

}

1.4 아이디 선택자 : HTML id 속성의 값이 ABC인 요소 선택

#ABC

#id명 {

}

 

2. 복합

2.1 일치 선택자 : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

ABCXYZ

span.orange{
 /* span 태그이면서 orange클래스 */
}

2.2 자식 선택자 : 선택자 ABC의 자식 요소 XYZ 선택

ABC > XYZ

ul > .orange {

}

2.3 하위(후손) 선택자 : 선택자 ABC의 하위 요소 XYZ 선택. 띄어쓰기

ABC XYZ

div .orange{

}

.orange -> div(조건) 로 해석

2.4 인접 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

ABC+XYZ

.orange+li {

}

2.5 일반 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ  모두를 선택

ABC~XYZ

.orange~li{

}

 

3. 가상 클래스

3.1 가상 클래스 선택자 hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

ABC:hover 

a:hover {

}

3.2 가상 클래스 선택자  active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

ABC:active

 

3.3 가상 클래스 선택자 focus : 선택자 ABC 요소가 포커스되면 선택

ABC:focus

input:focus {

}

focus <-> blur

 

3.4 가상 클래스 선택자 first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택

ABC:first-child

.fruits span:first-child {

}

 

span이 형제 요소 중 첫째이고, fruits 클래스의 후손

 

3.5 가상 클래스 선택자 last-child : 선택자 ABC가 형제 요소 중 막내라면 선택

ABC:last-child

 

3.6 가상 클래스 선택자 nth-child(n) : 선택자 ABC가 형제 요소 중 n째라면 선택

ABC:nth-child(n) 

.fruits *:nth-child(2n+1) {

}

n은 0부터 시작

n+2

 

 

4. 가상 요소 => 인라인 요소

4.1 가상 요소 선택자 before : 선택자 ABC 요소의 내부 앞에 내용 삽입

ABC::before

.box::before{
  content: "앞";
 }

 

4.2 가상 요소 선택자 after : 선택자 ABC 요소의 내부 뒤에 내용 삽입

ABC::after

 

 

5. 속성

5.1 속성 선택자 atr : 속성 ABC를 포함한 요소 선택

[ABC]

[disabled] {
  
}