Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

nth-child misbehaving? [SOLVED]

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#2 2020-03-09 16:14:39

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: nth-child misbehaving? [SOLVED]

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


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2020-03-09 16:29:10

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: nth-child misbehaving? [SOLVED]

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*


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#4 2020-03-09 17:21:35

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: nth-child misbehaving? [SOLVED]

Did you try them without the p tag?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2020-03-09 17:32:46

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: nth-child misbehaving? [SOLVED]

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#6 2020-03-09 17:53:27

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: nth-child misbehaving? [SOLVED]

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.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#7 2020-03-09 22:25:22

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: nth-child misbehaving? [SOLVED]

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?


TXP Builders – finely-crafted code, design and txp

Offline

#8 2020-03-09 22:31:29

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: nth-child misbehaving? [SOLVED]

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#9 2020-03-10 01:26:26

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: nth-child misbehaving? [SOLVED]

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#10 2020-03-25 09:56:47

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: nth-child misbehaving? [SOLVED]

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.


TXP Builders – finely-crafted code, design and txp

Offline

#11 2020-03-25 11:58:20

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: nth-child misbehaving? [SOLVED]

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

Board footer

Powered by FluxBB