Syntax in Kickstart framework

HTML & CSS
1

The Kickstart framework includes this CSS. [class=“col_”]{}

I have not been able to find an explanation. Could someone help please?

2

There’s a couple of things happening here. Firstly, at the start, the * is the “universal selector”, which targets all elements. The next bit qualifies it, though. It’s an “attribute selector”. It’s targeting any element with a class that contains the string “col_”. So the whole rule will target any element that has a class name that includes “col_”.

So, for example, the rule would target all of these—


<div class="col_1"></div>
<p class="col_4"></p>
<span class="col_three"></span>
<div class="three_col_section"></div>

This code

[class[COLOR="#FF0000"]*[/COLOR]="col_"]

with the * looks for the “col_” string anywhere within the class name, whereas

[class[COLOR="#FF0000"]^[/COLOR]="col_"]

targets any element whose class begins with “col_”, and

[class[COLOR="#FF0000"]$[/COLOR]="col_"]

targets an element with a class name ending with “col_”.

3

Thank you very much for your prompt and excellent explanation.