How to change the text colour to red in second row using the div class in css?

Question

enter code here

 <div class="test"> 
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
 </div>

I tried to change the text color of second paragraph tag only to red using the test class

But I don't know how to do that without having an tr or td here

Does this answer your question? [how to select nth item from a CSS selector](https://stackoverflow.com/questions/63811839/how-to-select-nth-item-from-a-css-selector) — Jeremy Caney, Jul 12 '22 at 19:38
How would you do it if it were a `table` (with `tr` and `td`)? — Frank Conijn - Support Ukraine, Jul 13 '22 at 18:29

Parit Sawjani · Answer 1 · 2022-07-13T18:19:41.497

0

You can use the nth-child() selector to achieve this:

Some more answers here if you want to understand it further nth child selector`

.test p:nth-child(2) {
  color: red;
}

<div class="test">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>

edited Jul 13 '22 at 18:19

answered Jul 12 '22 at 19:35

Parit Sawjani

Alejandro Hellin · Answer 2 · 2022-07-12T19:34:41.860

-1

    div.test p:nth-child(2) {
      background-color: red;
    }

 <div class="test"> 
  <p>One</p>
   <p>Two</p>
   <p>Three</p>
  </div>

edited Jul 12 '22 at 19:34

answered Jul 12 '22 at 19:31

Alejandro Hellin

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 13 '22 at 14:50

2 Answers2