nth-child misbehaving? [SOLVED]

Bloke · 2020-03-09 14:53:19

I’m flummoxed. I have articles in which I’m displaying:

h3
image-in-container
text
h3
image-in-container
text
…

all the way down the page. All the content is inside a <div class="articleBody"> container. The following CSS works on some pages but not others to pepper the images alternating left-right down the page:

.articleBody .image:nth-child(even) {
    float: right;
    width: 40%;
    margin-left: 1rem;
  }
  .articleBody .image:nth-child(odd) {
    float: left;
    width: 40%;
    margin-right: 1rem;
  }

On some articles I get two ‘lefts’ or two ‘rights’ sequentially. Other pages work fine. All are served from the same template, and the same form. If I look at the source, I see the image tags I expect and their containers:

<p itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="image ">
    <img itemprop="url contentUrl" src="https://example.com/images/{id}.jpg" alt="alt-text">
</p>

No empty image tags, no empty containers, no extra classes, nothing untoward as far as I can see. I’ve tried using (even) and (odd) as well as the (2n) and (2n+1) variants. Same result. Same across browsers so I can’t blame them for shoddy implementation. It’s got to be my fault but I cannot see what I’m doing wrong, and why on some articles it’s fine and others it isn’t.

Anyone seen this type of thing before? Should I be using nth-of-type instead? Is it something obvious I’m overlooking about the way the nth-child works? Should I be targeting different selectors somehow?

Thanks in advance for any pointers.

colak · 2020-03-09 16:14:39

A shot in the dark. Would a percentage play better than the 1rem?

Bloke · 2020-03-09 16:29:10

Thanks but there’s no change in position of the images with percentage margins. I still occasionally get the odd images floating out of sequence:

left, right, right, left, right, left, right

Or on another article:

left, right, left, right, left, left

*scratches head*

colak · 2020-03-09 17:21:35

Did you try them without the p tag?

Bloke · 2020-03-09 17:32:46

Could do. I was using Phil’s image container example as I figured it must be done that way for a reason. But I could ditch the paragraphs and just put the images directly with the class and see what happens. I’ll give it a go and report back.

colak · 2020-03-09 17:53:27

Bloke wrote #322114:

Could do. I was using Phil’s image container example as I figured it must be done that way for a reason. But I could ditch the paragraphs and just put the images directly with the class and see what happens. I’ll give it a go and report back.

I do not know the exact case but span with schemas may also be appropriate. I would test without it first though.

jakob · 2020-03-09 22:25:22

I think it has to do with two things:

a) nth-child is not as specific as using nth-of-type.
b) neither works reliably with classes. They require elements.

Take a look at this sample of nth-child. All odd elements are green, all even elements are red. You can see the irregular placement of the images but if you count through the dom elements (bearing in mind that image always comes after the title regardless of when floated right to look as if the text comes first), you can see the green and red alternate “correctly” over all children of articleBody.

Then take a look at this test page using nth-of-type(odd) and nth-of-type(even) using a figure for the wrapper instead of a p tag. That produces the result I think you’re looking for?

phiw13 · 2020-03-09 22:31:29

nth-child counts the number of direct children from the parent element, it does not count the number of .images instances. In fact, the images class is processed after counting the number of children.

IOW – it can be read as “count the number of kids, check if it is an even number and then check if it has the class .images” If all conditions are fulfilled, apply the rules

nth-of-type will possibly do what you want, assuming I correctly understand what you are trying. But again, that selector works on elements (h3 or p or…). You might be better off wrapping your images in a figure element.

Bloke · 2020-03-10 01:26:26

Thank you for all the input. Using nth-of-type with a figure wrapper as prescribed by jakob works flawlessly. Looking back at it with this newfound knowledge, I think it fell apart when the number of paragraphs varied. Most blocks had 3 <p> tags, but some had 4 and it went haywire after that point in the DOM, screwing up the counting as phiw13 intimates.

Genius, thank you so much.

Last edited by Bloke (2020-03-10 01:28:35)

jakob · 2020-03-25 09:56:47

Just noting that a built-in solution for this may be coming with:

:nth-child(2 of .bar) { }

See this article stub on css-tricks and some link love for the original css-nth-of-class article on bram.us.

phiw13 · 2020-03-25 11:58:20

jakob wrote #322287:

:nth-child(2 of .bar) { }...

yes, that is lovely solution, unfortunately Safari/WebKit only so far. I have used it for a couple of projects that are macOS and/or iOS only, with pleasure.

I have no idea what the status is in other browsers. I think the Firefox people have been working on these on and off.

Textpattern CMS

Textpattern CMS support forum

#1 2020-03-09 14:53:19