Sibling selector on image wrapped with links - html

Question

I'm trying to sibling-select images. There's a sequence of images that are wrapped with links and I want to select all but the first one.
img {
max-width: 50px;
}
.content img {
max-width: 400px;
}
img.a ~ img.a {
border: 1px #333 solid;
}
<div class="content">
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Astrodon1DB.jpg">
</a>
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Nipponosaurus_dinosaur.png">
</a>
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Macronaria_scrubbed_enh.jpg/800px-Macronaria_scrubbed_enh.jpg">
</a>
</div>
Here's a fiddle: http://fiddle.jshell.net/efsev59z/
Why doesn't img.a ~ img.a select all images with class "a" that follows an image with class "a"? From my understanding they're both children of a common element, .content. What's wrong, and how do I make it happen?

Answer 1

To be considered siblings, the elements need to be children of the same immediate parent (not just a common ancestor, since all DOM elements share body as an ancestor for example). Consider something like this:
a ~ a > img.a {
/* styles */
}

Answer 2

sibling selectors only apply to siblings. Each one of those images have their own parents. They are cousins, rather than siblings.

Answer 3

A different approach is to apply the border to all images but then override it for the first image. You can use the :first-child selector to get the first anchor and target the image within it.
img {
max-width: 50px;
}
.content img {
max-width: 400px;
}
img.a {
border: 1px #333 solid;
}
.content a:first-child img {
border:none;
}
http://fiddle.jshell.net/efsev59z/4/