선택자(복합 / 가상클래스 / 부정)

div > ul {}

div li {}

li:nth-child(3) + li {}

li:nth-child(2) ~ li {} 

복합 선택자

(조건 선택요소)

 

부모요소 > 자식요소 : 바로 다음 요소

상위요소  하위요소 : 바로 다음 요소는 아닐 수 있음

선택요소 + 인접형제 : 바로 다음 형제요소

선택요소 ~ 일반형제 : 선택요소 다음 모든 형제들

.box {
    width: 100px;
    height: 200px;
    background: salmon;
}

.box:active/hover {
    transition: 0.4s;
    width: 200px;
    background: red;
}

input {
  width: 100px;
  outline: none;
  border: 1px solid lightgray;
  padding: 5px 10px;
  transition: 0.4s;
}

input:focus {
    border-color: red;
    width: 200px;
}

가상클래스 선택자

(선택요소:가상클래스 선택자(hover, active, focus))

 

hover : 마우스를 올리면

active : 클릭하고 있는 동안에

focus : 선택한 요소를 변경 (input과 주로 같이 쓰임)

 

*transition은 변하지 않는 영역을 가진 요소 쪽에 작성해줘야 부드럽게 적용됨

*가상선택자 != js 이벤트(위의 3가지는 특수한 경우라고 생각)

 

<ul class="list">
    <li>1</li>
    <li class="no">2</li>
    <li>3</li>
    <li>4</li>
</ul>

.list li:not(.no) {
    color: red;
}

부정 선택자

(선택요소:not(.class))