CSS3 Attribute Selectors

CSS3 defines three more attribute selector variations. These new selectors give us the ability to make partial matches to attribute values—we can match strings at the start, end, or anywhere within an attribute value.

We can use the ^= operator to cause an attribute selector to match elements that have an attribute containing a value that starts with the specified value:

a[href^="http:"] {
  ⋮ declarations
}

This example matches a elements that have an href attribute value which starts with the characters “http:”.

Using the $= operator, an attribute selector can match elements that have an attribute which contains a value ending with the specified value:

img[src$=".png"] {
  ⋮ declarations
}

This example matches a elements that have an href attribute value which starts with the characters “http:”.

Using the $= operator, an attribute selector can match elements that have an attribute which contains a value ending with the specified value:

div[id*="foo"] {
  ⋮ declarations
}

This example matches div elements whose id attribute value contains the characters “foo”.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments

Comments on this post are closed.