Marusya's School Notes

CSS [Attribute~="Value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

HTML file:	Displayed by browser:
<style> [title~="flower"] { border: 5px solid yellow; } </style> <body> <p>All images with the title attribute containing the word "flower" get a yellow border.</p> <img src="../html_beg/images/bored.jpg" title="my-flower" width="125" height="163"> <img src="../html_beg/images/lily.png" title="flower" width="127" height="163"> <img src="../html_beg/images/pinktree.png" title="tree" width="99" height="175"> <img src="../html_beg/images/redwine.png" title="my flower" width="95" height="213"> </body>	All images with the title attribute containing the word "flower" get a yellow border.

HTML file:

Displayed by browser:

<body>

<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="../html_beg/images/bored.jpg" title="my-flower" width="125" height="163">
<img src="../html_beg/images/lily.png" title="flower" width="127" height="163">
<img src="../html_beg/images/pinktree.png" title="tree" width="99" height="175">
<img src="../html_beg/images/redwine.png" title="my flower" width="95" height="213">

</body>

All images with the title attribute containing the word "flower" get a yellow border.

The example above will match elements that have the title with values of "flower", "summer flower", and "flower new", but not those with values equal to "my-flower" or "flowers".