Search within TutorialsPark

CSS Attribute Selectors


Apply CSS styles based on an Attribute and combinations of its values.


CSS Selectors

1. CSS attribute Selectors enable you to target elements based on any HTML attributes it has

CSS Attribute Selectors

E[attribute] : Attribute Selector

E[attribute="value"] : Attribute Exact Value Selector

E[attribute~="value"] : Spaced List Attribute Selector.

E[attribute*="value"] : Contains Attribute Selector.

E[attribute^="value"] : Begins with Attribute Selector.

E[attribute|="value"] : Hyphenated List Attribute Selector

E[attribute$="value"] : Ends with Attribute Selector.


CSS : Attribute Selector E[attribute]

1. To assign CSS styles to an element that has a particular attribute we use the selector E[attribute] .

2. The value of the attribute does not matter. The first part of the selector is the Element and the next part is square brackets is the attribute.

Example:CSS Attribute Selector

Give it a TRY! » Note: Use this selector to match all attributes.


CSS : Attribute's Exact Value Selector E[attribute="value"]

1. To apply CSS styles to elements that have the same attribute value we use the selector E[attribute="value"] .

2. CSS styles will be applied if the elements selected has the attribute equal to exact value.

Example:Attribute's exact value Selector

Give it a TRY! » Note: Type selectors are mainly used to define the basic style for the entire website.


CSS: Spaced list Attribute Selector E[attribute~="value"]

1. Used to apply CSS styles based on value of the attribute within a list of space separated values or words.

2. The CSS style will be applied only if an exact match occurs between the space separated list of values and attribute value within the tags.

3. Eg: img[alt~="tintin"] will select elements only with alt equal to "tintin" and not "tintinSnowy" or "tintindetective".

Example: Begins with Attribute Selector

Give it a TRY! » Note: An exact match must occur for elements to be selected.To Select a tilde (~) sign must occur before equal sign.


CSS: Contains Attribute E[attribute*="value"]

1. Use this Selector to apply CSS styles to elements where the attribute contains a given substring(i.e complete words or parts of words)

2. This will apply styles to an element if the value occurs anywhere within the attribute.

3. 3. Eg: img[alt*="tintin"] will select elements all elements with alt equal to "tintin" or "tintinSnowy" or "tintindetective".

Example: CSS Contains Attribute

Give it a TRY! » Note: An asterisk(*)sign is used before the equal to sign.


CSS: Begins with Attribute E[attribute^="value"]

1. Use this Selector to apply CSS styles to elements where the attribute value begins with the exact string(word).

2. Here the carlet symbol "^" means "Begins with".

3. Eg: a[href^="http://"] can be used to target all external links beginning with http://. But won't target links using the scheme https:// .

Example: CSS Begins with Attribute

Give it a TRY! » Note: An carlet(^)sign is used before the equal to sign.


CSS: Hyphenated List Attribute E[attribute|="value"]

1. Use this Selector to apply CSS styles to elements where the attribute's value is exactly the same or value immediately followed by a hyphen

2. This selector is generally used for matching languages codes. Eg: a[hreflang|= "en"].

3. 3. Eg: a[hreflang|= "en"] will select elements all elements with hreflang equal to "en" or "en-US" or "en-GB".

Example: CSS Hyphenated List Attribute

Give it a TRY! » Note: For the element to be selected the target value must be at the beginning of the string.


CSS: Ends with Value AttributeE[attribute$="value"]

1. Use this Selector to apply CSS styles to elements where the attribute value ends with exact string used in the selector.

2. This will apply styles to an element only if the attributes value ends with the string.

3. Eg: a[href$=".php"] will select elements all elements ending with .php .

Example: CSS Ends with Attribute

Give it a TRY! » Note: A dollor($)sign is used before the equal to sign.


All CSS Attribute Selectors

Units Names Descriptions
E[attribute] Attribute Selects elements if it has the specified attribute
E[attribute="value"] Exact Value Selects elements if the Element has specified attribute equal to the exact value.
E[attribute~="value"] Spaced List Selects elements if the Element has specified attribute equal to exact value within space-separated list.
E[attribute*="value"] Contains Selects elements if the Element has specified value equal to exact value appearing anywhere.
E[attribute^="value"] Begins with Selects elements if the Element has specified attribute equal to the exact value only at the Beginning of the string.
E[attribute|="value"] Hyphenated List Selects elements if the Element has specified attribute equal to exact value within hyphen-separated list.
E[attribute$="value"] Ends with Selects elements if the Element has specified attribute equal to the exact value at the end of string.