[포스코x코딩온] 웹 개발자 입문 과정 1주차 회고 | 속성 선택자

 

 

속성 선택자

속성 선택자는 HTML 요소의 속성 값이 특정 값과 일치하는 경우 해당 요소를 선택하는 방법입니다. 예를 들어, href 속성 값이 https://www.example.com인 a 요소를 선택하려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

a[href="https://www.example.com"] {
  color: red;
}

 

이렇게 하면 a 요소의 href 속성 값이 https://www.example.com인 경우 텍스트 색상이 빨간색으로 변경됩니다. 속성 선택자는 특정한 요소나 클래스를 지정하지 않고도 속성 값이 일치하는 모든 요소를 선택할 수 있어 유용합니다.

 

 

속성 선택자의 종류

속성 선택자에는 여러 종류가 있습니다. 가장 기본적인 형태는 [attr]으로, 이는 attr이라는 속성을 가지고 있는 모든 요소를 선택합니다. 다른 종류의 속성 선택자는 다음과 같습니다.

• [attr=value]: attr 속성 값이 value와 정확하게 일치하는 모든 요소를 선택합니다.
• [attr^=value]: attr 속성 값이 value로 시작하는 모든 요소를 선택합니다.
• [attr$=value]: attr 속성 값이 value로 끝나는 모든 요소를 선택합니다.
• [attr*=value]: attr 속성 값이 value를 포함하는 모든 요소를 선택합니다.

예를 들어, 다음과 같은 CSS 코드를 사용하면 class 속성 값이 example인 모든 div 요소의 배경색이 노란색으로 변경됩니다.

See the Pen atrribute selector by onenationonemind1 (@onenationonemind1) on CodePen.