Can you help me understand what this css code will do?

Question

.content > p:first-child { border-top: 1px solid #666; color: rgba(127, 191, 63, 0.72); }

Need some help understanding what kind of results this snippet of css code will do, especially the selector portion.

Thank you.

Answer 1

.content > p:first-child
{
  color: red
}

<div class="content">
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
</div>

The result is just saying that, the css rules inside the brackets, will be applied to the first paragraph (<p>...</p>) inside all elements who get class content -> (<div class="content"></div>).

Answer 2

This is my first time answering a question on Stack overflow ,now coming to your question the above code line you mentioned will select all div with class .content and grabs it's all child paragraphs (those which are directly inside the .content div, if there is another div inside your content div which has paragraphs than it will not select them ) .Than there comes a psedu selector :first child which will select the first paragraph out of the those choosen paragraphs.

Thank you

Answer 3

A tag inside a tag is the child of the tag it is in. For example in this code all of the <p> tags are childs of the <div> tag because they are inside the div. .content > p:first-child selects the first child of the div with a class of content which is a <p> tag. In this case it is the <p> tag with the text of "paragraph 1".

<div class="content">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</div>

Answer 4

.content > p:first-child

Selects first paragraph element (<p>) which is direct child of element with class name 'content'