CSS Primer for Lightning Developers: CSS Attribute Selectors

One of the lesser known features of CSS is the attribute selector, which allows you to match and apply styling to HTML elements based on the presence of attributes or specific attribute values within an element.

To use attribute selectors, specify an HTML element type followed by the attribute selector enclosed in brackets. For example:


element[attribute] {

    property: value;

}

[attribute] Selector

The [attribute] selector is the most straightforward of all of the attribute selectors, as it will match any given HTML elements that have the specified value present.

For example, to apply styling to all <a> elements with a target attribute:


a[target] {

    background-color: orange;

}

[attribute=”value”] Selector

The [attribute=”value”] selector is more granular than the [attribute] selector in that it will apply styling only to HTML elements that match an exact attribute value.

For example, to apply styling to all <li> elements with an attribute of role and an attribute value of tab:


li[role="tab"] {

    font-weight: bold;

}

When you use the “=” sign, the selector will only match elements with the exact attribute value. If you need more flexibility, there are other attribute selectors that provide additional options for pattern matching.

[attribute~=”value”] Selector

The [attribute~=value] selector will match HTML elements that contain an attribute value.

Using the “~=” sign provides more flexibility than the “=” sign in that the selector will match HTML elements that contain the target attribute value, but may also specify other whitespace separated values for an attribute.

For example, to apply styling to all p elements containing the value of “en-us” for the lang attribute:


p[lang~="en-us"] {

    color: red;

}

CSS3 Attribute Selectors

The three attribute selectors we just learned about were introduced with the CSS2 specification. The CSS3 specification provided additional attribute selectors for even more flexibility and granularity.

Although we will not get into the details of the CSS3 attribute selectors, it is worth being aware of them:

  • [attribute|=”value”] Selector – Matches elements with an attribute that is either the specified value or begins with the specified value and is immediately followed by a hyphen (-) character.
  • [attribute^=”value”] Selector – Matches elements with an attribute that begins with the specified value.
  • [attribute$=”value”] Selector – Matches elements with an attribute that ends with the specified value.
  • [attribute*=”value”] Selector- Matches elements with an attribute that contains the specified value as a substring.
Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply