1) These are CSS attribute selectors, to be specific these are Attribute presence and value selectors
2) If you want to select all the columns you don't have to use attribute selectors, just apply the CSS to the element. Well, for gridster plugin can replace .grid
with .gs_w { }
, .gs_w[data-sizex="12"]{ }
and so on in the demo jsfiddle.
.grid{
/* Applies to all */
background: #808080;
color: #fff;
border: 1px solid #eee;
padding: 5px 10px;
}
.grid[data-sizex="12"]{
width: 720px;
}
.grid[data-sizex="11"]{
width: 710px;
}
.grid[data-sizex="10"]{
width: 700px;
}
.grid[data-sizex="9"]{
width: 690px;
}
.grid[data-sizex="8"]{
width: 680px;
}
.grid[data-sizex="7"]{
width: 670px;
}
.grid[data-sizex="6"]{
width: 660px;
}
.grid[data-sizex="5"]{
width: 650px;
}
.grid[data-sizex="4"]{
width: 640px;
}
.grid[data-sizex="3"]{
width: 630px;
}
.grid[data-sizex="2"]{
width: 620px;
}
.grid[data-sizex="1"]{
width: 610px;
}