select every second img within content

[piete...@tenzer.nl]

I would like to align every first image within com_content to the right and every second image to the left. The problem there is that css or jquery using selectors like :nth-child, :nth-of-kind or img:eq(odd) wont work, because the all target within an element, and adding image in most editors will insert them within a p-tag.

So as following:

<div class="content">
<p><img src="image1.jpg" /> some text<p>
<p>some text</p>
<p><img src="image2.jpg />some more text</p>
<p><img src="image3.jpg /> even more text</p>
</div>

I want the first image1 to float right, image2 to float left and image3 to float right again. Lets say style every img to float right by default, how do i target the second img so i can let that one float left? either css or javascript will do.

[Hannes Papenberg]

p:nth-of-kind img {
//styles

}

Am 22.06.2016 um 15:54 schrieb piete...@tenzer.nl:
> I would like to align every first image within com_content to the right
> and every second image to the left. The problem there is that css or
> jquery using selectors like :nth-child, :nth-of-kind or img:eq(odd) wont
> work, because the all target within an element, and adding image in most
> editors will insert them within a p-tag.
>
> So as following:
> |
>
> <divclass="content">

> <p><imgsrc="image1.jpg"/>some text<p>
> <p>some text</p>
> <p><imgsrc="image2.jpg />some more text</p>
> <p><imgsrc="image3.jpg />even more text</p>

> </div>
> |
>
>
> I want the first image1 to float right, image2 to float left and image3
> to float right again. Lets say style every img to float right by
> default, how do i target the second img so i can let that one float
> left? either css or javascript will do.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Joomla! General Development" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to joomla-dev-gene...@googlegroups.com
> <mailto:joomla-dev-gene...@googlegroups.com>.
> To post to this group, send email to joomla-de...@googlegroups.com
> <mailto:joomla-de...@googlegroups.com>.
> Visit this group at https://groups.google.com/group/joomla-dev-general.
> For more options, visit https://groups.google.com/d/optout.

[Hannes Papenberg]

Or .content img:nth-of-kind(2n) {}

Am 22.06.2016 um 15:54 schrieb piete...@tenzer.nl:

> I would like to align every first image within com_content to the right
> and every second image to the left. The problem there is that css or
> jquery using selectors like :nth-child, :nth-of-kind or img:eq(odd) wont
> work, because the all target within an element, and adding image in most
> editors will insert them within a p-tag.
>
> So as following:
> |
>
> <divclass="content">

> <p><imgsrc="image1.jpg"/>some text<p>
> <p>some text</p>
> <p><imgsrc="image2.jpg />some more text</p>
> <p><imgsrc="image3.jpg />even more text</p>

> </div>
> |
>
>
> I want the first image1 to float right, image2 to float left and image3
> to float right again. Lets say style every img to float right by
> default, how do i target the second img so i can let that one float
> left? either css or javascript will do.
>

[piete...@tenzer.nl]

that just wont really do i guess, p:nth-of-kind img will target every nth-p, but it is not given that every p-tag contains an image, so it's not functional for every situation, img:nth-of-kind might work, didn't try that, but you did get me on the right track.
I was i gave this one a little bit more though before asking, it always turns out to be much more simple... i used javascript to solve: 

$(".item-page").each(function () {
    $(this).find("p>img:odd").css({"float": "left", "margin" : "5px 20px 20px 0px"});
});

i guess the css version would be (by heart)

.item-page p>img:nth-child(odd) {
}

The only weakness is if someone would take the image out of the p-tags where the wysiwyg editor would place them, but client wont be playing with code anyway.

Thnx!:)

Op woensdag 22 juni 2016 16:06:13 UTC+2 schreef Hannes Papenberg:

Or .content img:nth-of-kind(2n) {}