Example: More attribute selectors
In our example, we select based on the attribute alt
, with the following consequences:
- The blue padding appears on images with the value of the alternative text attributeAn attribute supplying text to display, if an image cannot be loaded. starting with the letter b, namely bird and boatonwater.
- The purple padding appears on the image with the value of the alternative text attribute ending with the letter t, namely fishingboat
- The pink padding appears on images with the value of the alternative text attribute containing flower.
Images: (right) Ivor Traber
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
img[alt^="b"] {
padding: 2rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX