[CSS] CSS / Selector / Attribute Selector

#css

#Attribute Selector

Attribute Selector

The attribute selector selects elements that have specific attributes, or elements that have specific attributes, such as specific values.

[attributename]

• attributename Select the element that has the attribute.
• For example, the following selects the h1 element with the title attribute.

h1[title]

[attributename="value"]

• attributename Selects an element whose attribute value is value.
• For example, the following selects the h1 element whose title attribute value is abc.

h1[title="abc"]

• Note that the attribute values ​​must match exactly.
• For example, the following is selected,

<h1 title="abc">Lorem</h1>

• The following are not selected.

<h1 title="abc xyz">Lorem</h1>

[attributename~="value"]

• attributename Selects an element whose attribute value contains value.
• For example, the following selects the h1 element whose title attribute value contains abc.

h1[title~="abc"]

• Whether to include it is decided on a word basis.
• For example, the following is selected,

<h1 title="abc xyz">Lorem</h1>

• The following are not selected.

<h1 title="abcxyz">Lorem</h1>

 

 

[attributename|="value"]

• attributename Selects an element whose attribute value begins with value or value-.
• For example, the following selects the h1 element whose title attribute value starts with abc or abc-.

h1[title|="abc"]

• The following is selected,

<h1 title="abc">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>

• The following are not selected.

<h1 title="abc xyz">Lorem</h1>

[attributename^="value"]

• attributename Selects an element whose attribute value starts with value.
• For example, the following selects the h1 element whose title attribute value starts with abc.

h1[title^="abc"]

• It is based on strings, not words. Therefore, all of the following are selected:

<h1 title="abc xyz">Lorem</h1>
<h1 title="abc-xyz">Lorem</h1>

[attributename$="value"]

• attributename Selects an element whose attribute value ends with value.
• For example, the following selects the h1 element whose title attribute value ends with abc.

h1[title$="abc"]

• It is based on strings, not words. Therefore, all of the following are selected:

<h1 title="xyz abc">Lorem</h1>
<h1 title="xyz-abc">Lorem</h1>

[attributename*="value"]

• attributename Selects an element whose attribute value contains value.
• For example, the following selects the h1 element whose title attribute value contains abc.

h1[title*="abc"]

• Whether to include it is determined by the character string. Therefore, all of the following are selected:

<h1 title="abc xyz">Lorem</h1>
<h1 title="abcxyz">Lorem</h1>
<h1 title="lmn abc-xyz">Lorem</h1>