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.