[class][class]
is a selector that targets any element with at least one class
attribute. The main distinction between [class][class]
and [class]
lies in specificity, as each attribute selector adds to the overall specificity of the selector:
Note: Repeated instances of the same simple selector are permitted and increase specificity.
To illustrate specificity, let's examine the specificities of three example selectors:
/* 1 class, 2 attributes -> specificity = (0,3,0) */
.classname1[class][class]
/* 1 class, 1 attribute -> specificity = (0,2,0) */
.classname1[class]
/* 1 class -> specificity = (0,1,0) */
.classname2
An !important
declaration under a less specific selector will take precedence over a non-important declaration under this selector. Likewise, an !important
declaration within this selector will override any !important
declarations in less specific or equally specific selectors higher up in the source order.
If the goal was simply to target .classname2
, using multiple attribute selectors on top of a class selector might seem excessive. However, it's possible the author intended to override another selector. Ultimately, only they would truly know the reasoning behind their choice.
The reason [class][class]
works is because it doesn't mandate the presence of two class
attributes. In a compound selector, all simple selectors are treated independently, including attribute selectors, regardless of their names or values. Selectors do not assume or dictate whether an element can have multiple class
attributes—instead, an attribute presence selector matches based on the existence of at least one.
While the spec does mention the theoretical possibility of an element having multiple class
attributes, this isn't currently feasible in modern HTML. On the contrary, it explicitly states that elements can have multiple ID attributes, which must all be considered when matching ID selectors. Although there isn't explicit guidance for value-matching with attribute selectors, it's reasonable to assume similar principles would apply given how multiple IDs function in HTML.