https://stakedesigner.com/<h2>Exact Match &mdash; [attribute="value"]</h2>

<p><a href="https://stakedesigner.com/"> www.stakedesigner.com </a></p>
<p><a href="https://www.youtube.com/@stakedesigner/videos">Youtube</a></p>
<hr>

<h2>Attribute Value Contains &mdash; [attribute*="value"]</h2>
<div class="gallery">
  <img src="//placehold.it/150/150/abstract" alt="abstract art">
  <img src="//placehold.it/150/150/food" alt="something to eat">
  <img src="//placehold.it/150/150/sports" alt="athlete starting a new sport">
</div>
<hr>

<h2>Attribute Value is in Space-Separated List &mdash; [attribute~="value"]</h2>

<div class="gallery2">
  <img src="//placehold.it/150/150" alt="abstract art">
  <img src="//placehold.it/150/150" alt="something to eat">
  <img src="//placehold.it/150/150" alt="athlete starting a new sport">
</div>
<hr>

<h2>Attribute Value Starts With &mdash; [attribute^="value"]</h2>

<div class="gallery3">
  <img src="//placehold.it/150/184/abstract" alt="artistic pattern">
  <img src="//placehold.it/150/184/food" alt="a healthy meal">
  <img src="//placehold.it/150/184/sports" alt="Arthur Miller">
</div>
<hr>

<h2>Attribute Value is First in Dash-Separated List &mdash; [attribute|="value"]</h2>

<ul>  
  <li data-years="1800-1900">The 19th Century</li>
  <li data-years="1901-2000">The 20th Century</li>
  <li data-years="2000-2100">The 21st Century</li>
</ul>
<hr>

<h2>Attribute Value Ends With &mdash; [attribute$="value"]</h2>

<p class="story"> web developers. <i>Read the fascinating account in <a href="//s3-us-west-2.amazonaws.com/s.cdpn.io/652/example.pdf">example.pdf</a></i></p>

a[href="https://stakedesigner.com/"] { /*select only the link with the exact href value https://www.stakedesigner.com */
  color: #E18728;
  font-size: 1.5em;
}

.gallery img[alt*="art"] { /* alt attribute contains the word art, as whole or partial word */
  outline: 5px solid #E18728;
  outline-offset: 2px;
}

.gallery2 img[alt~="art"] { /* alt attribute contains art as only value or in space-separated list */
  outline: 5px solid #E18728;
  outline-offset: 2px;
}

.gallery3 img[alt^="art"] { /* alt attribute starts with the value "art" */
  outline: 5px solid #E18728;
  outline-offset: 2px;
}

li[data-years|="1901"] { /* data-years attribute starts with 1900 as the only value or first in a dash-separated list */
  color: red;
}

a[href$="pdf"]:after { /* href attribute ends with pdf */
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/pdficon_small.png);
  padding-left: .3em;
}



/* styling for Pen, unrelated to attribute selectors */

body { 
  font-family: sans-serif;
  width: 90%;
  margin: 0 auto;
  line-height: 1.5;
}

img { margin-right: .5em; }

hr { 
  margin: 1em 0;
  clear: both;
}

.story {
  text-indent: 1em;
  font-family: serif;
  font-size: 1.2em;
}

.story:first-letter { font-size: 1.5em; }