Target certain CSS Classes with Gridster Plugin

Question

I'm using the Gridster plugin, where columns width are defined like this:

[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....

I have 2 questions about this;

1. What kind of CSS classes are these? I have never done/seen anything like this, especially in CSS.
2. If I want to select all the columns from 1-12, how do I use the code? Typically I'm using something like [class*=".."] this. I don't think so I can get a format like this for the above scenario.

Answer 1

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;
}

Demo Here