CSS Introduction | CSS Selectors | Attribute Selectors

Tags:

Attribute Selectors

With attribute selectors, you can select HTML elements that have a specific attribute or a specific attribute value.

Basic Attribute Selectors

The basic attribute selectors available in CSS are as follows.

  • [attribute] selector
  • [attribute="value"] selector

[attribute] Selector

Syntax

[attribute]

The [attribute] selector selects all elements that have a specific attribute.

<style>
    [title] { background: black; color: yellow; }
</style>

[attribute="value"] Selector

Syntax

[attribute="value"]

The [attribute="value"] selector selects all elements that have a specific attribute and whose attribute value also matches.

<style>
    [title="first h2"] { background: black; color: yellow; }
</style>

String Attribute Selectors

In addition to basic attribute selectors, CSS provides string attribute selectors. String attribute selectors select elements by checking for a specific string in the value of a specific attribute.

The string attribute selectors available in CSS are as follows.

  • [attribute~="value"] selector
  • [attribute|="value"] selector
  • [attribute^="value"] selector
  • [attribute$="value"] selector
  • [attribute*="value"] selector

In Internet Explorer 8 and earlier, the <!DOCTYPE html> tag must be inserted in the HTML document for string attribute selectors to be recognized correctly.

[attribute~="value"] Selector

Syntax

[attribute~="value"]

The [attribute~="value"] selector selects all elements whose specific attribute value contains one word made up of a specific string.

<style>
    [title~="first"] { background: black; color: yellow; }
</style>

In the example above, only elements whose title value is "first h2" or "first p" are selected. An element whose title value is "first-p" is not selected.

In this way, the [attribute~="value"] selector selects only elements whose title value is exactly "first" or contains "first" as a word recognized by whitespace.

The [attribute~="value"] selector recognizes words based on whitespace. Therefore, a hyphenated word like the example is recognized as one complete word, not as separate words.

[attribute|="value"] Selector

Syntax

[attribute|="value"]

The [attribute|="value"] selector selects all elements whose specific attribute value starts with one word made up of a specific string.

<style>
    [title|="first"] { background: black; color: yellow; }
</style>

In the example above, only the element whose title value is "first-p" is selected. Elements whose title value is "first h2" or "first p" are not selected.

In this way, the [attribute|="value"] selector selects only elements whose title value is exactly "first" or starts with "first" immediately followed by a hyphen.

[attribute^="value"] Selector

Syntax

[attribute^="value"]

The [attribute^="value"] selector selects all elements whose specific attribute value starts with a specific string.

<style>
    [title^="first"] { background: black; color: yellow; }
</style>

Unlike the [attribute|="value"] selector, this selector selects all elements whose attribute value starts with a specific string. Therefore, in the example above, all elements whose title value starts with "first" are selected.

[attribute$="value"] Selector

Syntax

[attribute$="value"]

The [attribute$="value"] selector selects all elements whose specific attribute value ends with a specific string.

<style>
    [title$="first"] { background: black; color: yellow; }
</style>

This selector selects all elements as long as the value of a specific attribute ends with a specific string. Therefore, in the example above, all elements whose title value ends with "first" are selected.

[attribute*="value"] Selector

Syntax

[attribute*="value"]

The [attribute*="value"] selector selects all elements whose specific attribute value contains a specific string.

<style>
    [title*="first"] { background: black; color: yellow; }
</style>

This selector selects all elements as long as the value of a specific attribute contains a specific string. Therefore, in the example above, all elements whose title value contains "first" are selected.

Using Attribute Selectors

By using the attribute selectors described above, you can easily select HTML elements to style without specifying a class or ID.

<style>
    input[type="text"] { width: 150px; display: block; background-color: #FFEFD5; margin-bottom: 10px; }
    input[type="password"] { width: 130px; display: block; background-color: #90EE90; border: solid 2px red; }
    input[type="password"]:focus { background-color: #FFC0CB; }
</style>