~= operator selects elements whose attribute value contains a specified word in a space-separated list of words.
Syntax
[attribute~="value"]
containsWord.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Attribute Selector Example</title> <style> /* Selects elements whose class attribute contains the word 'highlight' */ [class~="highlight"] { background-color: yellow; } </style> </head> <body> <div class="box highlight">Highlighted Box</div> <div class="box special">Special Box</div> <div class="box_highlight special">Highlighted Special Box</div> </body> </html>
Above snippet generate below screen.
If you use *= (contains) instead of ~=, you will see below kind of screen.
Previous Next Home
No comments:
Post a Comment