Not supported by Explorer 6-.
Selects elements with a certain attribute or an attribute with a certain value.
Testsheet:
p[class] {color: #6374AB}
p[ppk] {letter-spacing: 0.3em;}
p[align=right] {font-style: italic;}
p[ppk=false] {font-weight: 600;}
p[class~=test] {text-decoration: underline;}
p[class] {color: #6374AB}
Each element p with an attribute class—the value of the attribute doesn't matter.
This paragraph has class="testclass". It should be blue.
p[ppk] {letter-spacing: 0.3em;}
Each element p with an attribute ppk—the value of the attribute doesn't matter..
This paragraph has a ppk="true" attribute. It should have a huge letter-spacing.
The p[align=right] selector means "each p that has an ALIGN attribute with
value "right". The p[class~=test] selector means "each p that has a CLASS one
of whose values is "test".
p[align=right] {font-style: italic;}
Each p with an attribute align="right".
This paragraph has align="center". Nothing should happen.
This paragraph has align="right". It should be italic.
p[ppk=false] {font-weight: 600;}
Each p with an attribute ppk="false".
This paragraph has a ppk="false" attribute. It should be
bold and have a huge letter-spacing.
The previous paragraph with a ppk attribute
didn't have the value "false" so it should not become bold.
p[class~=test] {text-decoration: underline;}
Each p with an attribute class, one of whose values is "test". The
values of the attribute should be separated by spaces.
This paragraph has a class="small test" attribute.
It should be blue and underlined.
The blue colour comes from the previous rule p[class] {color: #6374AB}, which obviously
also works on this paragraph, since it has a class.