Simple pseudo-class example

MDN Learn
#1

Hello!

In this example is said that

. Instead of adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article, and we will no longer need to edit the HTML

As I see from this situation:

  1. When we need to paste an additional text (in the case with the".first" class) and we want it to be bold, we have to either add a text inside the first <p> or to add another one <p class="first"> below.
  2. When we need to paste additional text (in p:first-child case) and we want it to be bold - we have to add a text inside the first <p>.

So I would like to catch where is this benefit?

#2

Hi @DenisM

The advantage is that you don’t have to think about moving the class when adding a new paragraph at the top or creating a new article. It just makes the new first paragraph bold and the old first paragraph (now second) isn’t bold anymore.

This advantage is more obvious when we look at a CMS: Most of their online editors automatically insert <p>s when the user presses the “Return” key on the keyboard. Now think about having dozens of authors (most of them aren’t developers) and you have to explain to all of them that after writing they have to look at the source code and add (or move) a class. This situation begs to go wrong. :wink:

I hope that makes it a bit clearer.

Cheers!
Michael

1 Like
#3

Hi @mikoMK!

Yes, it has become clear for me due to your explanation, thank you very much. The problem was I didn’t think of it as a new paragraph could be added before the first one. Additional thanks for the CMS example.

Kind regards
Denis

1 Like