의사 선택기
:첫 번째 자식
:막내
/*첫 div 배경색 tomato*/
div:first-child{
background-color: tomato;
}
/*마지막 div 배경색 teal*/
div:last-child{
background-color: teal;
}
:n-자식(숫자)
:n번째 자식(짝수)
:n번째 자식(홀수)
/*2번째 span에만 배경색 적용*/
span:nth-child(2){
background-color: teal;
}
/*짝수 span에만 배경색 적용*/
span:nth-child(even){
background-color: teal;
}
범위를 찾고 효과를 적용하는 방법은 다음과 같습니다.
1) 부모· 어린아이 같은 관계
2) 형제자매 관계
1-1)
/*div 밑에 있는 모든 span이 효과를 가진다*/
div span{
text-decoration: underline;
}
1-2)
/*div의 direct child인 span이 효과를 가진다*/
div > span{
text-decoration: underline;
}
2-1)
/*div와 동등한 위치에 있는 span이 효과를 가진다 (바로 뒤에 온다는 걸 가정하에!!)*/
div + span{
text-decoration: underline;
}/*예)-sibling 찾기*/
<div>div 바로 뒤에</div>
<span>span이 이렇게 와야 한다.</span>
2-2)
/*span이 div의 형제인데 바로 뒤에 오지 않을 때 사용한다*/
div ~ span{
text-decoration:underline;
}/*예)*/
<div>div 바로 뒤에</div>
<p>다른 게 껴버렸다면</p>
<span>"~"을 사용하여 찾아준다.</span>
속성 선택자
HTML
<form>
<input type="text" placeholder="username"/>
<input type="password" required placeholder="password"/>
</form>
CSS
input(type="password"){
background-color: aqua;
}
/*password 배경색을 aqua로 바꿔준다 (text는 안 바뀜)*/
(attr ~= 값)
~= : 포함(값)
HTML
<form>
<input type="text" placeholder="first name"/>
<input type="text" placeholder="last name"/>
<input type="password" required placeholder="password"/>
</form>CSS
input(placeholder ~= "name"){
background-color: pink;
}
/*결과값: placeholder에 "name"을 포함한 모든 input 배경색을 pink로 바꿔준다*/
