CSS 속성(Attribute) 선택자

h1[class]	class명을 가진 h1 요소
img[alt]	alt 속성을 가진 img 요소
p[class="abc"]	class명이 유일하게 'abc'인 p 요소
p[class~="abc"]	class명이 유일하게 'abc이거나 여러 개의 class명 중 하나가 'abc'인 p요소
p[class|="abc"]	class명이 'abc'이거나 'abc-'로 시작하는 요소
p[class^="abc"]	class명이 철자 'abc'로 시작하는 p 요소
p[class$="abc"]	class명이 철자 'abc'로 끝나는 p 요소
p[class*="abc"]	class명이 철자 'abc'가 포함되어 있는 p 요소
p[href="mailto"]	href 속성값이 'mailto'로 시작하는 a 요소

CSS [attribute] Selector

[attribute]선택기는 특정 속성을 가진 요소를 선택하는 데 사용된다.

다음 예제는 대상 속성이있는 모든 <a> 요소를 선택합니다.

a[target] {
  background-color: yellow;
}

 

 

CSS [attribute="value"] Selector

[attribute="value"]선택기는 특정 속성 및 값을 가진 요소를 선택하는 데 사용된다.

다음 예제는 target = "_ blank"속성이있는 모든 <a> 요소를 선택합니다.

a[target="_blank"] {
  background-color: yellow;
}

 

CSS [attribute~="value"] Selector

[attribute~="value"]선택기는 특정 단어를 포함하는 속성 값을 가진 요소를 선택하는 데 사용된다.

다음 예는 공백으로 구분 된 단어 목록 (하나는 "flower")을 포함하는 title 속성을 가진 모든 요소를 ​​선택합니다.

[title~="flower"] {
  border: 5px solid yellow;
}

 

 

CSS [attribute|="value"] Selector

[attribute|="value"]선택기 지정된 값으로 시작하는 지정된 속성 요소를 선택하는 데 사용된다.

다음 예제는 "top"으로 시작하는 클래스 속성 값을 가진 모든 요소를 ​​선택합니다.

참고 : 값은 class = "top"과 같이 단독으로 또는 class = "top-text"와 같이 하이픈 (-)으로 끝나야합니다. 

[class|="top"] {
  background: yellow;
}

 

CSS [attribute^="value"] Selector

[attribute^="value"]선택기 속성 값이 지정된 값으로 시작 선택 소자에 사용된다.

다음 예제는 "top"으로 시작하는 클래스 속성 값을 가진 모든 요소를 ​​선택합니다.

참고 : 값이 전체 단어 일 필요는 없습니다! 

[class^="top"] {
  background: yellow;
}

 

CSS [attribute$="value"] Selector

[attribute$="value"]선택기 속성 값이 지정된 값의 단부 선택 소자에 사용된다.

다음 예제는 클래스 속성 값이 "test"로 끝나는 모든 요소를 ​​선택합니다.

참고 : 값이 전체 단어 일 필요는 없습니다!  

[class$="test"] {
  background: yellow;
}

 

CSS [attribute*="value"] Selector

[attribute*="value"]선택기 속성 값이 소정 값을 포함하는 선택 요소로 사용된다.

다음 예제는 "te"를 포함하는 클래스 속성 값을 가진 모든 요소를 ​​선택합니다.

참고 : 값이 전체 단어 일 필요는 없습니다!  

[class*="te"] {
  background: yellow;
}

 

예제

See the Pen oNXbeON by miae (@flato) on CodePen.

 

 

 

https://www.w3schools.com/css/css_attribute_selectors.asp

CSS Attribute Selector