CSS [attribute*=value] Selector

This CSS Selector is very useful when used in a responsive design. When seen in code it can be confusing as it is not obvious that the square brackets are significant in the syntax.

The [attribute*=value] selector matches every element whose attribute value containing a specified value.

This selector is used in my Responsive solution (based on the W3C code).

This selector is possibly one of the most significant to understand when analysing the Responsive Design of the W3C multi-column responsive layout

The formatting of the page layout is achieved by matching of column classes and floating elements left:

The Column Classes and media queries

All these .col classes will be matched:

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

In the W3C multi-column layout the "menu" is also a .col class and everything gets set to width: 100%

The W3C multi-column responsive behaviour

The design has 3 columns, the left is col-3 and menu, the middle is col-6 and col-s-9 and the right is col-3 and col-s-12

  <div class="col-3 col-s-3 menu">   /* left menu*/
  <div class="col-6 col-s-9">       /* middle main content*/
  <div class="col-3 col-s-12">      /* right aside*/

The classes for the columns in the layout will depend on the device width.
For a tablet the right column has width 100%.

The div elements have multiple class attributes, if the media query defines the selector the column will have that width. In this case a column will either have a "col-" or a "col-s-" selector. Both are matched by the CSS [attribute*=value] Selector. If a selector is not defined for an element it will be ignored in the DOM.