은학의 코딩 일기장
CSS (Selector) 본문
선택자의 종류
Type : <div> <span> 과 같은 타입을 나타내는 선택자
Class : <div class = "abc">
Id : <div Id = "abc">
Type
p{
color : "black";
}
처럼 활용
3번째 우선순위를 가짐
Class
.abc{
color : "black";
}
처럼 활용
.을 붙이는게 포인트 !!
2번째 우선순위를 가짐
Id
#abc{
color : "black";
}
처럼 활용
#을 붙이는게 포인트 !!
1번째 우선순위를 가짐
자식 자손 형제 선택자
html
<p>
<li> => p의 자식
<div> => p의 자손
<p> => p와 div는 형제
자식 선택자를 선택할 때
p > li {
color : "black";
}
자손 선택자를 선택할 때
p li { // 띄어쓰기 한번만 해주면 됨!
color : "black";
}
형제 선택자
html
<p class = "active">
<p>
<p>
<p>
<p>
css
.active ~ p{
}
이러면 active 클래스 밑에 전부다
css
.active + p{
}
이러면 active 클래스 밑에 하나
구조적 가상 클래스 선택자
html
<p> a </p>
<p> a </p>
<p> a </p>
<p> a </p>
p : firstchild {
color : "black";
}
=> 첫번째 a만 적용
p : lastchild {
color : "black";
}
=> 마지막 a만 적용
p : nth-child (4){
color : "black";
}
=> 4번째 a 적용
동적 가상 클래스 선택자
a: hover{
color : "black";
}
hover = 화살표를 갖다 댔을때 변화
a: active{
color : "black";
}
active = 클릭 했을 때 변화
input: focus{
color : "black";
}
focus = input처럼 뭔가 집중될 때 변화
css 선택자 올림픽
선택자 우선순위
1위 : Id
2위 : Class / pesudo Class
3위 : Type
올림픽처럼 누적해서 우선순위 정함
ex ) Id1개 Class 2개 > Id1개 Type 2개
예외
inline style => 선택자 우선순위 무시하고 1순위
!important => 부동의 1위
*{
color : "hotpink" !important;
}