본문 바로가기
Publishing/CSS3

CSS 속성(Attribute) 선택자

by 오다다의 이상한 코드 odada 2020. 2. 14.
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

CSS Attribute Selectors Style HTML Elements With Specific Attributes It is possible to style HTML elements that have specific attributes or attribute values. CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attr

www.w3schools.com

'Publishing > CSS3' 카테고리의 다른 글

CSS Web font  (0) 2020.02.20
CSS Fonts  (0) 2020.02.18
가상 선택자  (0) 2020.02.17
CSS 속성(Attribute) 선택자  (0) 2020.02.14
CSS Type 선택자  (0) 2020.02.14
CSS 사용법  (0) 2020.02.14

댓글0