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. 

Examples

[attribute]


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

<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>

0 Comments

Leave a reply

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