Inflearn Community Q&A
asked
focus시 not pseudo class 적용 이유가 궁금합니다.
Written on
·
320
1
16:50 쯤에 psedo class를 적용해서 input 요소에 focus시 border가 바뀌었는데요.
적용하지 않으면 왜 바뀌지 않는건지 이해가 안됩니다.
원리가 있는건가요. 아니면 그냥 그렇다고 이해해야하는건가요?
HTML/CSSjavascriptjquery
Answer 1
0
codingworks
Instructor
아래 코드 부분을 말씀하시는 것 같은데요.
.field input:not(input[type=radio]):focus {...}
붉은 색 부분 :not(input[type=radio]) 이렇게 해야 클릭(focus) 되었을 때 라디오 버튼에는 보더가 생기면 안되기 때문에 이렇게 준 것 입니다.
그리고 input에 마우스가 클릭 된다는건 브라우저가 focus 된 다고 생각합니다.
focus를 주지 않고 클릭하면 보더가 생기지 않습니다. focus에 보더가 생기라고 css에 만들어 놓아서 그렇습니다.
물론 css를 아무것도 주지 않은 상태에서 input에 클릭하면 브라우저가 포커스 되었다고 생각해서 outline을 만듭니다. 하지만 outline을 쓰지 않기 때문에 보더로 변화를 주어야 합니다. 가래서 :focus를 사용해야 합니다.
codingworks
Instructor
영상을 다시 봤는데 아래처럼 해주고 focus에서 보더 색상 변경하는거 확인하는 부분있습니다.
16분 42초 다시 한번 확인해주세요.
▲ 이 부분은 기본적인 그레이 보더를 일괄적으로 주는 부분입니다.
▲ 이 부분은 focus 되었으 때 보더의 색상을 변경하는 부분입니다.
아 제가 전달을 잘 못했네요.
16:18초 정도에 input에 클릭후 focus가 됬음에도 색깔이 바뀌지 않고있습니다. 제가 만든 소스에서도 그렇구요.
not을 붙여서 radio를 제외하려는 의도는 이해했습니다만 왜 radio가 아닌 input 요소들도 적용이 안될까요?
Selector 범위에는 들어오는데 말이죠.
아래 Before, After 선택자 입니다.
Before
적용안됨. 범위에 포함
.field input:focus, .field select:focus {
...
}
After
.field input:not(input[type=radio]):focus, .field select:focus {
...
}