CSS Attribute Selector | CSS Selectors

CSS Attribute Selector

Attribute selectors select every element with the attribute specified within square brackets{}. An attribute type or an attribute with a specific value can be styled with them.

Existing Attribute Selectors :

  • [attributename]
  • [attributename="val"]
  • [attributename~="val"]
  • [attributename|="val"]
  • [attributename^="val"]
  • [attributename$="val"]
  • [attributename*="val"]

1.[attributename]

This selector will match only input elements that use the type attribute, such as the following element:

input[type] {}
<input type="text">

2. [attributename="val"] /* Exact(match) Attribute Value Selector */

 It will match by both attribute and value. If you want to be more specific, use the “equality” attribute selector.

input[type="textarea"] {}
<input type="textarea">

3.[attributename~="val"] /* Delimited value selector - Whitespace */

The elements whose attribute value contains the given word among a space-separated list of words like  value should be  (rel = “language2 language”).

a[rel~="language"]{}
<a rel="language2 language" href="#"> Link </a> <!-- Matches the second word "language" -->

4.[attributename|="val"] /* Language attribute selector */

This selector is used to match the lang attribute. This selector will match any elements whose lang attribute value begins with “es”, including “es-ES”, “es-MX”.

p[lang|="es-ES"] {}
<p lang="es-ES">Spain</p>
<p lang="es-MX">Mexico</p>

5.[attributename^="val"] /* Value start selector */

This attribute value begins with the specified string.

a[title^='image'] {...}
<a title="image"></a>

6.[attributename$="val"] /* Ending Selector */

This attribute value ends with the specified string.

a[title$='2'] {...}
<a title="image 2"></a>

7.[attributename*="val"] /* Arbitrary Selector */

This attribute value contains the specified substring.

a[title*="image"] {}
<a title="source image link"></a>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s