css3 Substring matching attribute selectors | css3 selectors

Substring matching attribute selectors
[att^=val]  :  Represents an element with the att attribute whose value begins with the prefix “val”.
[att$=val]  :  Represents an element with the att attribute whose value ends with the suffix “val”.
[att*=val]   :  Represents an element with the att attribute whose value contains at least one instance of the substring “val”.
This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.
Assume that we have an HTML document that contains the following markup structure:
  1. <div id=”nav-primary”></div>
  2. <div id=”content-primary”></div>
  3. <div id=”content-secondary”></div>
  4. <div id=”tertiary-content”></div>
  5. <div id=”nav-secondary”></div>
By using the substring matching attribute selectors we can target combinations of these structural parts of the document.
The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }
In this case the selector will match div#nav-primary and div#nav-secondary.
To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }
This time the selector will match div#nav-primary and div#content-primary.
The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }
The elements that will be affected by this rule are div#content-primarydiv#content-secondary, and div#tertiary-content.
The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.


I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

1 Response

  1. Heather says:

    I really was browsing for techniques for my
    personal blog and found your posting, “css3 Substring
    matching attribute selectors | css3 selectors | getallfix”, would you mind in the event
    I personally work with a bit of of your own ideas? With thanks ,Fernando

Leave a Reply

Your email address will not be published. Required fields are marked *