'[hidden]' selectors in css

Question

When we view normalize.css http://necolas.github.io/normalize.css/ source code, we can see the following:

[hidden], template {
    display: none;
}

What is the meaning of [hidden] ?

Answer 1

[attribute] is a selector for elements that have an attribute attribute.

[hidden] matches elements like this <p hidden>Hidden paragraph</p>.

The value doesn't matter, as long as the attribute exists. [lang] matches elements like this for example <p lang="pt-br">Paragráfo</p>.

P.S.: [attribute=value] also works. e.g. [headers="numberHeader"] for matching <td headers="numberHeaders">...</td>

Answer 2

According to a fast google search, I found the following

/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/

[hidden] {
display: none;
}

so obviously, you use the "hidden" attribute when you want something not to show up in your (e.g. html) code.