속성의 존재나 값에 따라 요소를 선택합니다.
[attr]은 속성 존재, [attr=value]는 정확한 값, ^=, $=, *=는 시작·끝·포함 값을 선택합니다. 폼 타입이나 외부 링크처럼 HTML 정보에 기반한 스타일에 유용합니다.
이메일 입력창은 type 값이 정확히 email이라 input[type=email] 선택자에 걸려 왼쪽 테두리가 5px 초록으로 굵어지고, placeholder 속성도 있어서 input[placeholder]의 옅은 배경까지 받습니다. textarea는 input 요소가 아니고 placeholder도 없으므로 두 규칙 어디에도 걸리지 않고 공통 규칙의 1px 테두리만 남습니다.
[attr~=value]는 공백으로 나뉜 단어 목록에 그 값이 한 단어로 들어 있는지 보고, [lang|=ko]는 값이 ko 자체이거나 ko-로 시작할 때 고릅니다. 또 닫는 대괄호 앞에 i를 붙이면 값을 대소문자 구분 없이 비교해, .PDF와 .pdf로 끝나는 링크를 한 선택자로 함께 고를 수 있습니다.
속성 값의 대소문자와 따옴표, 정확 일치인지 부분 일치인지 확인하세요.
직접 바꿔보세요textarea[rows] 선택자를 추가해 배경색을 바꾸세요.