Learning to Use CSS Attribute Selectors


November 24, 2015

CSS Attribute Selectors have been around since CSS2 and expanded as part of CSS3, compatible in all browsers (excluding IE6). Even though they are not new, they continue to be overlooked and under used.

Using CSS Attribute Selectors is good practice because you can:

  • Target and style specific attributes / values without adding additional code to markup

  • Maintain more semantic code
  • Update style without needing to access markup

With CSS Attribute Selectors it is possible to style specific attributes or attribute values. The following assumes you have some knowledge of HTML attributes and CSS.

Here are 7 CSS Attribute Selector methods:

1. [attribute] Selector

The following example will apply style to any <h1> element containing the title attribute.

CSS: h1[title] {color: red;}
HTML: <h1 title="Hello World">Hello World</h1>

2. [attribute="value"] Selector

The following example will apply style to any <a> element containing the target attribute with a value of "_blank" .

CSS: a[target="_blank"] {color: red;}
HTML: <a href="http://www.smtusa.com" target="_blank">smtusa.com</a>

3. [attribute~="value"] Selector

The following example will apply style to any <img> element containing the title attribute that includes the world "flower" separated by spaces.

CSS: img[title~="flower"] {border: 2px solid red;}
HTML: <img src="/images/sample.gif" title="daisy flower">

4. [attribute|="value"] Selector

The following example will apply style to any class attribute value that begins with "top". The value has be a whole word either alone or followed by a hyphen.

CSS: h1[class|="top"] {color: red;}
HTML: <h1 class="top-text">Hello World</h1>

5. [attribute^="value"] Selector

The following example will apply style to any class attribute value that begins with "top". The value does not have to be a whole word.

CSS: h1[class^="top"] {color: red;}
HTML: <h1 class="topText">Hello World</h1>

6. [attribute$="value"] Selector

The following example will apply style to any class attribute value that ends with "top". The value does not have to be a whole word.

CSS: h1[class$="test"] {color: red;}
HTML: <h1 class="mytest">Hello World</h1>

7. [attribute*="value"] Selector

The following example will apply style to any class attribute value that contains "te". The value does not have to be a whole word.

CSS: h1[class*="te"] {color: red;}
HTML: <h1 class="mytest">Hello World</h1>


The information here is really just the tip of the iceberg when it comes to CSS Attribute Selectors. It’s amazing that with just a little bit of code, you can achieve remarkably specific targeting with little to no additional markup required.

If you’re looking to update your website or create a new one, contact Sales & Marketing Technologies for more information on how our web designers and developers can work with you to create a functional, beautiful and lead generating website for your business.

Did you like this post?

Sign up for our Tips and Trends list and we'll let you know each week when we have a new one.

12 Ways to Get Your Business Growing Again

Categories

Web Design (26)
Web Development (35)
Misc. Website (21)
Search Engine Optimization (95)
Social Media Marketing (111)
Local Search Marketing (24)
Content Marketing (35)
PPC Advertising (31)
Digital Marketing (123)
Marketing Automation (23)
Sales Automation (18)
Company News (10)
Other (27)

Archives

Feeds