SOLVED: :first-of-type no longer working on Back-end or Front-end regardless of where CSS is applied

[studioapollo]

Bricks Version: 1.5 Beta
Browser: Chrome & Firefox Dev
OS: Windows
URL: https://www.staging3.royaldrainage.co.uk/drain-unblocking/

So, I actually have no idea how to replicate this issue. But essentially :first-of-type no longer seems to work as a pseudo element.

I originally tried to add the pseudo element to a class using the Builders built-in pseudo editor. All I wanted was to set the margin-top on the :first-of-type to be 1.6rem. But this had no effect. So I thought, maybe for some reason Bricks doesn’t support :first-of-type in this pseudo editor yet.

I then went to add it to the Custom CSS of the class (still in Bricks).

root:first-of-type {
    margin-top: 1.6rem;
}

…still didn’t work.

So, I then went to the Page Custom CSS to see if it would work there.

.list-item:first-of-type {
    margin-top: 1.6rem;
}

…still didn’t work.

Then I went to an external script manager. In an existing stylesheet I had setup (and has been showing all other changes to the site just fine), I added the CSS again. And it still doens’t work.

:first-of-type seems to be completely unavailable on the site? I tried :last-of-type and it works just fine.

When you check the front end of the site. The :first-of-type variation just isn’t there. :last-of-type is, just as expected.

I’ve disabled all caching plugins, clear site and browser cache. There are no other Bricks related plugins on the site. It’s a very basic setup at the moment.

[studioapollo]

Builder CSS:

Output:
:first-of-type Top
:last-of-type Bottom

[Matiasko]

Just tested and first-of-type sure works in Bricks.

2. (Selector isn’t outputted in the front-end)

3. (First selector isn’t outputted in the front-end)

I’m trying to fully grasp how first-of-type should work in specific cases, because for me, it isn’t straight up obvious, especially when you use it in a pure form without defining the “thing” that is the “type” part of it. Docs for reference: :first-of-type - CSS: Cascading Style Sheets | MDN especially “Nested elements” part

Could you show the current structure of the elements and the front-end outcome you’re trying to achieve? Even styled with element settings or simple/direct CSS.

[studioapollo]

Oh wow. I’ve been using :first-of-type for years and this is the first time I’ve come up against this problem. And it’s all because I misunderstood how it worked

Essentially, my understanding all this time was that if I did .classname:first-of-type it would select the first item that has that class name. But it’s selecting the semantic tag of the element, not the class name.

Somehow I’ve never managed to encounter this before.

My mistake!

Thanks for the quick response as always.

[timmse]

Thanks a lot for helping out Mateusz Much appreciate it!