<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS Selectors</title> </head> <body> <div data-color="red">This will be red</div> <div data-color="red">This will be red</div> <div data-background="red">This will NOT be red</div> </body> </html> |
div[data-color] {
color: red; } |
div[data-color="red"] {
color: red; } <div data-color="red">This will be red</div> <div data-color="green">This will NOT be red</div> <div data-color="blue">This will NOT be red</div> |
[class*="foo"] {
color: red; } <div class="foo-123">This will be red</div> <div class="foo123">This will be red</div> <div class="bar123foo">This will be red</div> <div class="barfooo123">This will be red</div> <div class="barfo0">This will NOT be red</div> |
[class~="color-red"] {
color: red; } <div class="color-red foo-bar the-div">This will be red</div> <div class="color-blue foo-bar the-div">This will NOT be red</div> |
[class^="foo-"] {
color: red; } <div class="foo-123">This will be red</div> <div class="foo-234">This will be red</div> <div class="bar-123">This will NOT be red</div> |
[class$="file"] {
color: red; } <div class="foobar-file">This will be red</div> <div class="foobar-file">This will be red</div> <div class="foobar-input">This will NOT be red</div> |