CSS - Atrribute Selector Property

Description

CSS attribute selectors allow you to select HTML elements based on the presence or value of one or more attributes. They are a powerful way to target specific elements in your HTML markup. Attribute selectors are enclosed in square brackets [] and can take various forms.

The following sections discusses some common ways to use attribute selectors:

CSS [attribute] Selector

This selector selects elements that have specified attribute, regardless of its value.

Syntax

[attribute]

Example

Following is an example to select all the HTML elements with a “data-toggle” attribute

CSS [attribute=”value”] Selector

This selector selects elements that have a specific attribute with a specific value.

Syntax

[attribute="value"]

Example

This selector selects all elements with a ‘data-toggle’ attribute whose value is set to ‘yes’.

CSS [attribute*=”value”] Selector

This selector selects elements that have a specific attribute with a value containing a specific substring.

Syntax

[attribute*="value"]

Example

This selector selects all the elements with a “src” attribute which contain a “images” in the path:

CSS [attribute^=”value”] Selector

This selector selects elements that have a specific attribute with a value that starts with a specific string.

Syntax

[attribute^="value"]

Example

This selector selects all elements with a “href” attribute starting with “https://“

CSS [attribute$=”value”] Selector

This selector selects elements that have a specific attribute with a value that ends with a specific string.

Syntax

[attribute$="value"]

Example

This selector selects all elements with a “src” attribute which ends with “.png”

CSS [attribute|=”value”] Selector

This selector select elements that have a specific attribute with a value that begins with a specified substring followed by a hyphen (-). This selector is often used for selecting elements with language-specific attributes, such as lang attributes, which often use hyphens to denote language subcodes.

Syntax

[attribute|="value"]

Example

This selector selects all the elements with a “lang” attribute that starts with “en” followed by a hyphen:

CSS [attribute~=”value”] Selector

This selector is used to select elements that have a specific attribute with a value containing a specified word. The word should be a standalone word, surrounded by spaces or at the beginning or end of the attribute value.

Syntax

[attribute~="value"]

Example

This selector select all elements with a “class” attribute containing the word “beautifyme”

Attribute Selectors For href Links

You can style elements based on their href attribute is a common attribute used on <a> elements to specify the URL that the link points to.

Here is an example −

Attribute Selectors For Inputs

Attribute selectors can be used to select input elements based on specific criteria, such as their type, name, value, or other attributes.

Here is an example −

Attribute Selectors For Title

To style elements based on the title attribute, you can use the CSS attribute selector title to style elements that have a title attribute containing a specific value.

Here is an example −

Attribute Selectors For Language

You can use the lang attribute to select elements based on their language. The lang attribute specifies the language of the text contained within an element.

Here is an example −

CSS Multiple Attribute Selectors

CSS multiple attribute selectors allow you to select elements based on multiple attribute values. It is use to target specific element that meet multiple criteria.

Here is an example −

CSS Attribute Selectors With Sibling Combinator

CSS attribute selectors and sibling combinators can be used together to select specific elements based on their attributes and their relationship to other elements.

• General sibling combinator (~) − This combinator selects all sibling elements that follow a specified element, but are not directly adjacent to it. Syntax selector1 ~ selector2 { /* CSS styles */ }

General sibling combinator (~) − This combinator selects all sibling elements that follow a specified element, but are not directly adjacent to it.

Syntax

selector1 ~ selector2 {
   /* CSS styles */
}

• Adjacent sibling combinator (+) − This combinator selects the element that is directly after the specified element. Syntax selector1 + selector2 { /* CSS styles */ }

Adjacent sibling combinator (+) − This combinator selects the element that is directly after the specified element.

Syntax

selector1 + selector2 {
   /* CSS styles */
}

The following example demonstrates that the adjacent sibling combinator (+) selects the paragraph immediately after the heading, while the general sibling combinator (~) selects <div> after the heading −