They are similar. The [] is the attribute selector , and CSS selects elements that have exactly this attribute.

Note that when you use the [class="foo bar"] method it will only work on elements that have both classes. While div.foo acts on all the divs that have this class.

The [] technique is useful for attributes other than id or class , because they have their own selectors and are simpler to use or combine.

Example:

div[class="um"] {
    background-color: #ccf;
}
div.um{
    border:2px solid red;
}

<div class="um">1</div>
<div class="dois">2</div>
<div class="um dois">1 2</div>

(jsFiddle: link )

When you use div.um it acts on two elements, when you use div[class="um"] it only acts on one element.

# (Sustained)

Already a character for representing the element ID by default in css.

[ID="MAIN"] (Attribute Chooser)

It means that you are using a CSS3 selector type, where you can "pick up" an element by the attribute ( Attribute Selector ). In that case, you're picking up the id (thing that the # already does)

The suggestion in this case is to use # , to keep your default code:)

Complex expressions for Captures elements by attributes

The Attribute Selector is more complex than this. It can take an element only if we define the part of the name of an attribute.

Example

[class=^"box-"]{
 color:#f00;
}

<div class='box-1'></div>
<div class='box-2'></div>
<div class='box-3'></div>


[class*="test"] {
    background: #ffff00;
}

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>