속성의 존재나 값에 따라 요소를 선택합니다.
[attr]은 속성 존재, [attr=value]는 정확한 값, ^=, $=, *=는 시작·끝·포함 값을 선택합니다. 폼 타입이나 외부 링크처럼 HTML 정보에 기반한 스타일에 유용합니다.
이번 예제의 출발점은 input[type="email"] { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 textarea[rows] 선택자를 추가해 배경색을 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
속성 값의 대소문자와 따옴표, 정확 일치인지 부분 일치인지 확인하세요.
직접 바꿔보세요textarea[rows] 선택자를 추가해 배경색을 바꾸세요.