Attribute selectors

Selects elements with a certain attribute or an attribute with a certain value.

Testsheet:

p[class] {color: #6374AB}
p[ppk] {background-color: #CB000F; color: white}
p[align=right] {border: 1px solid black;}
p[ppk=false] {font-weight: 600;}
p[class~=test] {text-decoration: underline;}

p[class]

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] {background-color: #CB000F; color: white}

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 red background.

p[align=right] and p[ppk=false]

The p[align=right] selector means "each p that has an ALIGN attribute with value "right".

p[align=right] {border: 1px solid black;}

Each p with an attribute align="right".

This paragraph has align="center". Nothing should happen.

This paragraph has align="right". It should have a border.

p[ppk=false] {font-weight: 700;}

Each p with an attribute ppk="false".

This paragraph has a ppk="false" attribute. It should be bold and have a red background.

The previous paragraph with a ppk attribute didn't have the value "false" so it should not become bold.

p[class~=test]

The p[class~=test] selector means "each p that has a CLASS one of whose values is "test".

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.

^=, $=, and *=

These selectors look for a substring in the attribute value.

1. p[testAttr^=foo]: any element whose testAttr attribute has a value that starts with "foo".
2. p[testAttr$=foo]: any element whose testAttr attribute has a value that ends with "foo".
3. p[testAttr*=foo]: any element whose testAttr attribute has a value that contains "foo".

Testsheet:

p[testAttr^=foo] {color: red;}
p[testAttr$=foo] {font-weight: bold;}
p[testAttr*=foo] {text-decoration: underline;}

This paragraph has testAttr="foobar". It should be red and underlined.

This paragraph has testAttr="barfoo". It should be bold and underlined.

• The testAttr^=foo works only on the first paragraph, since that paragraph has a class value that starts with "foo".
• The testAttr$=foo works only on the last paragraph, since that paragraph has a class value that ends with "foo".
• The testAttr*=foo works on both paragraphs, since both have a class value that contains "foo".

|=

This is a paragraph with testAttr="foo-bar".

The test paragraph should be red; this is overflow from the previous test, where ^=foo also selects it.

It should also have an overline, but not, apparently, be uppercase. The |= selector only matches the element if the attribute value starts with foo or foo-. The bar value cannot be used in this selector.

p[testAttr|=foo] {
	text-decoration: overline;
}

p[testAttr|=bar] {
	text-transform: uppercase;
}