How to target a nth-child

Author Posts

Martin_1 July 16, 2019 at 4:40 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I can’t seem to figure out how to target a nth-child.

I need to create something like:

#menu-main .menu-item:nth-child(10) .menu-text{
position:relative;
left:43px;
}

but I’m not sure how to do that.

Sebastian July 17, 2019 at 9:24 am

Hi Martin,

You can add custom selectors to Microthemer via the selectors menu or via the advanced targeting options. See this video for an example:

https://screencast-o-matic.com/watch/cFnVqco4Eh

Microthemer has UI options for setting :nth-child on the CSS modifiers menu to the right of the selector label field in targeting mode BTW. But it doesn’t have support for your type of selector, which adds the pseudo class on the parent in the selector:

.menu-item:nth-child(10) .menu-text

Rather than the target (which is supported):

.menu-item .menu-text:nth-child(10)

Cheers,
Sebastian

Martin_1 July 23, 2019 at 3:31 pm

Hi Sebastian,

I think I get it :-). I will play around and see if I really get it.

If not (in the wise words of Arnold): I’ll be back! :-D.

Sebastian July 23, 2019 at 5:06 pm

Sure thing!

You must login or register to reply to this topic.