Selectutorial - CSS selectors Attribute selectors What are attributes? All HTML elements can have associated properties, called attributes. These attributes generally have values. Any number of attribute/value pairs can be used in an element's tag - as long as they are separated by spaces. They may appear in any order. In the example below, the code segments highlighted in blue are attributes and the segments highlighted in red are attribute values. Attribute selectors Attribute selectors are used to select elements based on their attributes or attribute value. For example, you may want to select any image on an HTML page that is called "small.gif". This could be done with the rule below, that will only target images with the chosen name: img [src="small.gif"] { border: 1px solid #000; } There are four types of attribute selectors. The first option is to select based on attribute . The example below will select an element (in this case "img") with the relevant attribute. Examples could include: The second option is to select based on value . The example below will select any image whose attribute (in this case "src") has a value of "small.gif". img [src="small.gif"] { border: 1px solid #000; } The third method will select space separated instances of a value . The example below will select any image whose attribute (in this case "alt") contains a space separated list of words - in this case any "alt" that includes the word "small". img [alt~="small"] { border: 1px solid #000;