We can style HTML elements that have specific attributes or attribute values.

We can put the attribute value in single-quotes or double-quotes. It will work without quotes, but it's not valid as per the CSS standard.

Selector Remarks
[attribute] Element with attribute
[attribute='value']  Where attribute has value attr_value
[attribute~='value'] Where value containing a specified word.
[attribute^='value'] Where attribute's value begins with attr_value
[attribute$='value'] Where attribute's value ends with attr_value
[attribute*='value'] Where attribute contains any_value anywhere
[attribute|='value'] Used to select elements with the specified attribute
starting with the specified value.
[attribute='value' i] Where attribute has value value, ignoring
attr_value's letter casing. 



div[div-color] {
  background-color: green;

<div div-color="green">Text</div>
<div div-color="red">Text</div>

[attribute = "value"]

div[attr="green"] {
  color: green;

<div attr="green">Text</div>
<div attr="black">Text</div>

[attribute *= "value"]

[class*="red_text"] {
  color: red;

<div class="red_text">Text</div>
<div class="red_textdfsdf">Text</div>
<div class="dssdvred_text">Text</div>
<div class="red_txt">Text</div>
<div class="red_txt2">Text</div>

[attribute ~= "value"]

[class~="color-red"] {
  color: red;
[class~="color-green"] {
  color: green;

<div class="color-red abc def">Text</div>
<div class="color-green hhh ihk">Text</div>

[attribute ^= "value"]

[class^="red-text"] {
  color: red;

<div class="red-textscac">Text</div>
<div class="red-textscasccas">Text</div>
<div class="123cacsa">Text</div>

[attribute $= "value"]

[class$="any_word"] {
  color: blue;

<div class="123any_word">Text</div>
<div class="any_word-123">Text</div>

[attribute |= "value"]

[lang|="red-text"] {
  color: red;

<div lang="red-text-yes">Text</div>
<div lang="no-red-text">Text</div>

[attribute="value" i]

[lang="red-text" i] {
  color: red;

<div lang="red-text">Text</div>
<div lang="Red-text">Text</div>
<div lang="RED-text">Text</div>


Leave a reply

Your email address will not be published. required fields are marked *