CODEWITHSUNDEEP
csscss-selectorsstyles
user3126564
user3126564

Reputation: 77

Strange CSS code, Brackets and Asterisk

I came across the code below at http://www.w3schools.com/css/css_rwd_grid.asp

They don't really explain the part that looks like this [class*="col-"] and the style that starts with *

Can anyone point me to somewhere that explains this CSS code?

<style>
   * {
     box-sizing: border-box;
   }

   [class*="col-"] {
        float: left;
        padding: 15px;
        border: 1px solid red;
   }
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
 </style>

Upvotes: 0

Views: 1287

Answers (1)

Harry
Harry

Reputation: 89770

Attribute Selector: (the selector with square braces)

This - [class*="col-"] is called as an attribute selector. It is used to select an element based on an attribute and its value. In this case it selects all elements whose class contains col-. So, it would apply the style to .col-1, .col-2, .col-3 etc.

From the W3C Spec: (Section 6.3.2. Substring matching attribute selectors)

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

(emphasis is mine)

Universal Selector: (the styles which are under *)

The * selector is called as the universal selector and it is used to select and apply given styles to all elements.

From the W3C Spec:

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors. If a default namespace has been specified, see Universal selector and Namespaces below.

In your code, there are some styles which are column to all three col-* classes whereas the width is different. So, the [class*="col-"] selects elements with one of those three classes and adds the common styling to them whereas the individual .col-1, .col-2, .col-3 selectors apply the width specific to each class.

* { /* select and apply these styles to ALL elements */
  box-sizing: border-box;
}

[class*="col-"] { /* select all elements whose class contains col- */
  float: left;
  padding: 15px;
  border: 1px solid red;
}

/* select elements with specific class */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

It is more like a regex for selector but you should be careful while using them because [class*="col-"] will also select an element whose class='fevicol-is-an-adhesive' like in the below snippet.

[class*="col-"] {
  color: red;
}
<h3>Items that will be selected</h3>
<div class='col-1'>Column 1</div>
<div class='col-2'>Column 2</div>
<div class='col-3'>Column 3</div>
<div class='fevicol-is-an-adhesive'>Fevicol is an adhesive</div>

<h3>Items that will not be selected</h3>
<div class='cols-1'>Column 1</div>
<div class='col2'>Column 2</div>
<div class='column-3'>Column 3</div>
<div class='fevicol'>Fevicol is an adhesive</div>

Upvotes: 6

Related Questions