CSS: style a text box to only display one paragraph

Question

I have a text box on a page that I'm going to style to dynamically include content via dust.js:

<div class="box">
   {Lorem}
</div>

It will be populated with content that will already have HTML tags in it:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I want to style the box class so that only the first paragraph of the loripsum text is displayed. Is there a way to do that easily in Stylus/CSS?

Answer 1

EDIT

---

Try this:

.box > p:first-of-type
    visibility visible

Although the other answer picked the obvious solution, while testing certain styles were not being applied correctly. This must be something browser specific. So keep that in mind. The first-of-type selector seems to work best for me. But again, it may not work on every browser. Also, I recommend you set everything in box as hidden and use either selector to make the first paragraph as visibility of visible. Fiddle of what I mean included as an example. Good luck.

Answer 2

Use this selector:

div.box p:first-child

Example: (shows only the first paragraph)

<style>
    div.box p:not(:first-child){display:none;}
</style>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>