Live
x
<html> <head> <title>Selektory atrybutów</title> </head> <style> /* Zawiera daną wartość */ h2[class*="red"] { color: red } /* Zaczyna się od danej wartości */ h2[class^="blue"] { color: blue } /* Kończy się daną wartością */ h2[class$="green"] { color: green } /* Zaczyna się od danej wartości lub wartość ta zawiera myślnik */ h2[class|="violet"] { color: violet } /* Dana wartość oddzielona jest spacjami od innych wartości */ h2[class~="chartreuse"] { color: chartreuse } </style> <body> <section> <h2 class="test_red-test test">Przykładowy tekst ✔</h2> <h2 class="blue-test">Przykładowy tekst ✔</h2> <h2 class="testgreen">Przykładowy tekst ✔</h2> <br /> <h2 class="violet_test">Przykładowy tekst ❌</h2> <h2 class="test_violet-test">Przykładowy tekst ❌</h2> <!-- Klasa "violet" musi mieć myślnik, lub być jedyną wartością --> <h2 class="violet">Przykładowy tekst ✔</h2> <h2 class="violet-test">Przykładowy tekst ✔</h2> <br /> <h2 class="chartreuse-test">Przykładowy tekst ❌</h2> <!-- Klasa "chartreuse" musi być odseparowana spacjami lub być jedyną wartością --> <h2 class="chartreuse">Przykładowy tekst ✔</h2> <h2 class="chartreuse test">Przykładowy tekst ✔</h2> <h2 class="test chartreuse test">Przykładowy tekst ✔</h2> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.