I want to align images in a text. Some pictures should be on the right side and some other on the left side. I can achieve this by adding class=right or class=left to the img element. But these classnames are presentational, not semantic.Any ideas how to align images using semantically named classes?
How to align images left or right using semantically named classes?
html
Using CSS pseudo classesIm going to use the following CSS pseudo classes to align the images::nth-child(a)for a = 1  :first-child:nth-last-child(a)for a = 1  :last-child:nth-of-type(a)for a = 1  :first-of-type:nth-last-of-type(a)for a = 1  :last-of-typeSo I can select the ath image (of images). This approach completely separates markup and style.ExampleHTML:<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p><p>Stet clita kasd gubergren, no sea takimata sanctus.</p><img src=/path/to/image-1.ext alt=Example #1><p>At vero eos et accusam et justo duo dolores et ea rebum.</p><img src=/path/to/image-2.ext alt=Example #2>CSS:img:nth-child(3) {    float: right;}img:nth-child(5) {    float: left;}/* OR */img:nth-of-type(1) {    float: right;}img:nth-of-type(2) {    float: left;}