css 대괄호

대괄호([])로 지정한 속성을 가진 요소를 찾아서 스타일을 적용시킨다.
속성값도 함께 지정하면 요소들중 속성값까지 일치하거나, 포함하는 경우에만 적용하게 할 수 있다.

• [attribute-name=”value”]: 속성값이 “value”와 정확히 일치
• [attribute-name|=”value”]: 속성값이 “value”와 일치하거나 “value-“ 로 시작
• [attribute-name~=”value”]: 속성값이 “value”를 포함. 단어 기준
• [attribute-name*=”value”]: 속성값이 “value”를 포함. 문자열 기준
• [attribute-name^=”value”]: 속성값이 “value”로 시작. 문자열 기준
• [attribute-name$=”value”]: 속성값이 “value”로 끝. 문자열 기준

 

출처:

https://sungunjo.github.io/html-css/2020/06/02/css-selector.html

~ 선택자는 형제 요소끼리 사용 가능.