<h3>Selector:&nbsp;&nbsp;<code>A[attr^=val]</code></h3>
<div class="begins-with">
	<img class="size" src="https://placeimg.com/120/80/people">
	<img class="size-" src="https://placeimg.com/120/80/architecture">
	<img class="size-120x80" src="https://placeimg.com/120/80/nature">
	<img class="size-120x80-tech" src="https://placeimg.com/120/80/tech">
	<img class="size120x80" src="https://placeimg.com/120/80/animals">
</div>
<h3>Selector:&nbsp;&nbsp;<code>A[attr|=val]</code></h3>
<div class="dash-separated">
	<img class="size" src="https://placeimg.com/120/80/people">
	<img class="size-" src="https://placeimg.com/120/80/architecture">
	<img class="size-120x80" src="https://placeimg.com/120/80/nature">
	<img class="size120x80-tech" src="https://placeimg.com/120/80/tech">
	<img class="size120x80" src="https://placeimg.com/120/80/animals">
</div>
<h3>Selector:&nbsp;&nbsp;<code>A[attr$=val]</code></h3>
<div class="ends-with">
	<ul>
		<li data-file="music.mp3">Music</li>
		<li data-file="doc.pdf">Document</li>
		<li data-file="movie.mp4">Movie</li>
		<li data-file="image.png">Image</li>
	</ul>
</div>
<h3>Selector:&nbsp;&nbsp;<code>A[attr*=val]</code></h3>
<div class="contains">
	<a href="https://mysite.com">https://mysite.com</a><br>
	<a href="ftp://mysite.com">ftp://mysite.com</a><br>
	<a href="http://yoursite.com">http://yoursite.com</a><br>
	<a href="https://subdomain.mysite.com">https://subdomain.mysite.com</a><br>
	<a href="https://mysite.org">https://mysite.org</a><br>
	<a href="//mysite.com">//mysite.com</a><br>
</div>
<h3>Selector:&nbsp;&nbsp;<code>A[attr~=val]</code></h3>
<div class="product" data-categories="table wooden drawers oak beech maple">Product - Wooden Table</div>
<div class="product" data-categories="shelf wooden pine mdf">Product - Wooden Shelf</div>
.dash-separated img[class|="size"] {
	border: 5px #ccc solid;
	border-radius: 30px;
}

.begins-with img[class^="size"] {
	border: 5px #ccc solid;
	border-radius: 30px;
}

h3 {
	font-family: arial;
}

code {
	font-size: 1.2em;
}

.ends-with li[data-file$="mp3"]::after {
  content: " (" attr(data-file) ")";
	font-style: italic;
	color: red;	
}

.ends-with li[data-file$="pdf"]::after {
  content: " (" attr(data-file) ")";
	font-style: italic;
	color: blue;
}

.contains a[href*="mysite"] {
	font-style: italic;
	color: red;	
}

.product[data-categories~="table"] {
	font-weight: bold;
	color: green;	
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.