CSS Attribute Selectors

CSS [attribute] selector allows you to select and style HTML elements using their attributes or attribute values too. This makes your task easier to select HTML elements without a need to add a specific classor ID to most of the HTML elements.

a[target] {
  font-weight: bold;
  color: #333;
}

The example above selects and styles all the <a> elements that have the target attribute.

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and the value defined.

a[target="_blank"] { 
  font-weight: bold;
  color: #333;
}

The example above selects all the <a> element having target attribute with _blank as the value.

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing the defined word exaclty as it is within the value.

[title~="design"] {
  font-weight: bold;
  color: #333;
}

The example above will select all HTML elements with attribute title that contains the word design within its their value. The values can be anything like "web design", "graphic design". The selector skips values like "web-design", "graphic designs" though.

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select HTML elements with specified attribute that starts with the specified value.

[class|="nav"] {
  list-style: none;
  padding: 0;
}

The example above selects all HTML elements that have a class attribute with value starting with the term "nav" like "nav" itself as well as "nav-top", "nav-main", etc but skips values like "navbar".

CSS [attribute^="value"] Selector

Quite similar to the [attribute|="value"] selector, the [attribute^="value"] selector is used to select elements whose attribute value start with a specified value. This selector selects those elements too that the earlier selector skips.

[class^="nav"] {
  list-style: none;
  padding: 0;
}

The example above selects all HTML elements that have a class attribute with value statring with the term "nav" like "nav", "nav-top", "nav-main" as well as values like "navbar", "navigation", etc too.

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select HTML elements whose value ends with a specified term.

[class$="design"] {
  border: 1px solid #f7f7f7;
  padding: 10px;
  box-shadow: 3px 3px 5px #333;
}

The example above selects all HTML elements with class attribute whose value ends with the term "design" like "web-design", "graphic-design", "design" or even values like "webdesign".

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified term anywhere within the value.

[class*="av"] {
  border: 1px solid #f7f7f7;
  padding: 10px;
  box-shadow: 3px 3px 5px #333;
}

The example above selects all HTML elements with class attribute whose value contains the term "av" anywhere within the value like "avatar", "nav", "navigation", "mynavbar", etc.

Styling Form Elements Using CSS Attribute Selectors

As stated earlier, the CSS attribute selector allows you to select HTML elements with their attribute which can be highly useful while selecting HTML form elements without adding class or IDs as they have a number of attributes.

input[placeholder="Enter your name"]{
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  background: #096;
  border: 1px solid #096;
  color: #fff;
  padding: 5px 15px;
  cursor: pointer;
}

0 Like 0 Dislike 0 Comment Share Tweet