Just practicing my nth-child selectors. Codepen included.

Hi Mr. X,

Assuming that you wanted the 1st paragraph to be orange and the 2nd to be darkblue then the selectors you have would be one way to do it.

.main-content p:nth-child(2) {
  color: orange;
  font-weight: bold;
}

.main-content p:nth-child(3) {
  color: darkblue;
}

I'm not sure how to answer your question. I suppose the answer depends on what your intentions are.

You have mixed siblings here and :nth-of-type may be more appropriate.

.main-content p:nth-of-type(1) {
  color: orange;
  font-weight: bold;
}

.main-content p:nth-of-type(2) {
  color: darkblue;
}

Your 1st selector .main-content p:nth-child(2) is saying "select the 2nd child if it happens to be a paragraph". If that's your intention then it would be the right selector to use.

.main-content p:nth-of-type(1) is saying "select the 1st paragraph". So if that's more like what you wanted then you should use that instead.

For example, let's suppose you now go and add an image in between the two paragraphs. With nth-child your second paragraph will no longer be darkblue because the img is now the 3rd child and it's not a p element. So that's an unmatched selector now.

With nth-of-type the paragraphs will still be orange and darkblue.