: How to align images left or right using semantically named classes? 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

@Martha676

Using CSS pseudo classes

I’m 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-type



So I can select the ath image (of images). This approach completely separates markup and style.



Example

HTML:

<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;
}

Vote Up Vote Down

@Heady270

for that you just have to add this code

style:"float:left;margin-right:10px;margin-bottom:10px;"


and it works fine

Vote Up Vote Down

@Cofer257

Honestly, for this kind of situation it doesn't really matter that the class names are technically insemantic. We use insemantic class names for lots of things like grid systems.

If you think about it, the decision of whether you align left or right is dependent on the content itself. The content and its presentation are tightly coupled: if the content changes, the alignment may need to change too.

From a practical perspective, at the point the alignment needs to change, you are already editing the content (HTML), so it's not a problem to change the class name.

Vote Up Vote Down

@Alves908

As you suggest in comments, the problem with using left and right as class names is when/if you later change the CSS to reposition these elements which then makes these class names confusing.

Ideally class names should describe the type of element, not its position. eg. main-image, side-image, etc.

However, if the purpose of these classes is to simply position images left/right then it can be tricky to find better names that still have some logical meaning and can be easily understood when reading the HTML source. You could use something like side-a, side-b perhaps? They don't have any real meaning, but they look they could be related and at the same time are different.

Vote Up Vote Down

@Kristi941

Since HTML5, align is not an attribute to the img tag. As such, aligning an image is a CSS issue and not a semantic HTML one.

As a rule, semantic HTML is to explain what the content is - ie is it an image, a citation, an address etc, whereas CSS styles are more for the aesthetics - is it blue, a large font, etc. Image alignment falls under the latter category.

Giving your classes a good semantic name helps with development (allowing you to recognise your own classes in your style sheet), though there are no real standards to them (unless asked for by a third party, such as Google or Facebook, so that their robots can read them).

"Left" and "Right" are fine if you, as a developer, are sure they will always be left and right images. For example, for use in a wysiwyg editor where you would manually want to change the alignment and adding classes is used as the way of doing so.

Vote Up Vote Down