First-of-type pseudo-class effects twice in the same webpage

[bendqh1]

What may cause first-of-type pseudo-class to effect twice in the same webpage?

I avoid giving an HTML example due to an SEO reason (I can give privately), but I would anyway prefer to have a more theoretical CSS only discussion on the cause or possible causes for this phenomenon and how to deal with it in general.

In my particular case I used a complex framework to create a wepage comprised of two parts:

• Part one is a div containing two columns of 50% text 50% image.
• Part two is an article element with free text.

The first paragraph in part one and the first paragraph in part two are both effected.

[SamA74]

@bendqh1

I avoid giving an HTML example due to an SEO reason

The behaviour of the first-of-type pseudo-class is very much dependent on HTML structure, by leaving that out to guesswork you are prolonging diagnosis of the problem.
Forgive my ignorance, but how posting some HTML here will have any affect on “SEO” is a long way beyond my comprehension.
If you want only the theory, read the documentation on it. If you want practical help, post the code.

[kicken]

first-of-type is the first child of a particular type. It’s not a document-wide “first”. If you do a generic selector such as

p:first-of-type { color: red; }

It will match every first <p> child in the document.

[bendqh1]

In my opinion, linking to an example webpage with nonsensical text could lead a search engine to assume that the website is less qualitative than it actually is.

I still believe that there is a place for a question here, perhaps a less broad question such as how to prevent p:first-of-type to effect anything else besides its first match on a structure?

[SamA74]

@bendqh1

In my opinion, linking to an example webpage with nonsensical text could lead a search engine to assume that the website is less qualitative than it actually is.

All links here are markedf as nofollow so that search engines will ignore the links. It is also possible to post code directly to a post, or you may use a service such as Codepen to give working code examples.

Asking coding questions without code is like working blindfolded, you may be able to fumble by eventually, but things will be a lot easier if we all can see.

[bendqh1]

I don’t trust nofollow with every search engine but anyway the complex framework’s HTML is too large to put here. I suggest to close the question or to delete it and I will avoid asking a CSS question here without HTML code in the future.

[PaulOB]

@bendqh1

I still believe that there is a place for a question here, perhaps a less broad question such as how to prevent p:first-of-type to effect anything else besides its first match on a structure?

In reality unless you know the structure in advance there is no simple option (other than a script). If you know the structure in advance then you can negate the second and subsequent matches with a little fiddling around.

You could mangle some css to try and cover every situation but it would end up looking something like this.

As you see that is unmanageable.

You could do it with one line of JS though.