특정 속성을 가진 HTML 요소 스타일

특정 속성 또는 속성 값을 갖는 HTML 요소를 스타일화 할 수 있습니다. 

CSS [속성] 선택자 

[속성] 선택자는 지정된 속성을 가진 요소를 선택하는 데 사용됩니다.

다음 예제에서는 target 속성이 있는 <a> 요소를 모두 선택합니다.

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

CSS [attribute = "value"] 셀렉터 

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

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

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

CSS [attribute ~= "value"] 셀렉터 

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

다음 예제에서는 공백으로 구분 된 단어 목록을 포함하는 title 속성이 있는 모든 요소를 ​​선택합니다. 그 중 하나는 "flower"입니다.

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

위의 예는 title = "my-flower"또는 title = "flowers"가 아닌 title = "flower", title = "summer flower"및 title = "flower new"요소와 일치합니다.

CSS [attribute |= "value"] 셀렉터 

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

다음 예제에서는 class 속성 값이 "top"으로 시작하는 모든 요소를 ​​선택합니다.

** 이 값은 class = "top"와 같은 혼자이거나 class = "top-text"처럼 하이픈 (-)이 올 수 있는 전체 단어여야 합니다!

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

CSS [attribute ^= "value"] 셀렉터 

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

다음 예제에서는 class 속성 값이 "top"으로 시작하는 모든 요소를 ​​선택합니다.

** 그 값은 완전한 단어일 필요는 없습니다!

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

CSS [attribute$="value"] 셀렉터 

[attribute $ = "value"] 선택자는 속성 값이 지정된 값으로 끝나는 요소를 선택하는 데 사용됩니다.

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

** 그 값은 완전한 단어일 필요는 없습니다!

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

CSS [attribute *= "value"] 셀렉터 

[attribute * = "value"] 선택자는 속성 값이 지정된 값을 포함하는 요소를 선택하는 데 사용됩니다.

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

** 그 값은 완전한 단어일 필요는 없습니다!

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

양식 스타일링 

속성 선택자는 클래스 또는 ID없이 양식을 스타일링하는 데 유용 할 수 있습니다.

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}