CSS provides two special techniques to select partial attributes:
-
target an element based upon the presence of any single word in an attribute contains a space-separated list of words
-
target partial attributes values allows the selector to target an element based upon the begining of its assigned value, before a hyphen.
First Example:
*[class ~= "animal" {background : lime} <p>A list highlightin <span> class = "animal">animal</span> objects:</p> <ul> <li class = "reptile">Alligator <li class = "animal">Race hourse <li class = "animal furry">Domestic cat <li class = "fish">Barracuda <li class = "toy animal">Teddy Bear </ul>A list highlightin animal objects:
- Alligator
- Race hourse
- Domestic cat
- Barracuda
- Teddy Bear
Second Example:
img[src |= "square" {background: fuchsia } img[src |= "box" {background: lime } <p> <img src = ""> <img src = ""> <p> <p lang = "en-us">Hello</p> <p lang = "es">Hola Espana</p> <p lang = "es-mx">Hola Mexico</p> img[src |= "square" {background: fuchsia } img[src |= "box" {background: fuchsia }
(Because of the BLOG editing, the images do not have a fuchsia or lime outline)
Hello America
Hola Espana
Hola Mexico