CSS Attribute and Adjacent Sibling Selectors

Useful attribute selectors available in CSS3 for complete and partial matching of attribute values:

This example uses the title attribute of the H1 tag:

h1[title="Home"] { color: blue; } /*Exact value "Home" in the title attribute */
h1[title~="Home Back"] { color: red; }  /*  Attribute equals one of the list.*/
h1[title^="Home"] {color: green; } /*Title attribute starts with "Home" */
h1[title$="Home"] {color: orange; } /*Title attribute ends with "Home" */
h1[title*="me"] {color: black; } /*Title attribute contains "me" so will match "Home" */

An example using and attribute selector with an adjacent sibling selector to color the text in a span immediately after a radio button whose value contains the word “Full”.

input[value*="Full"] + span {
  color: #990000;
}

This sets the text color of the span immediately after all inputs having a value attribute that includes the word “Full”.

The “+” selects the span that is immediately after the input and must be a sibling (same parent) of the input. This is the Adjacent Sibling Selector.