How to display only text enclosed within a certain span tag using css

Question

Please, have a look at the html below. The first sentence is enclosed by a span tag with the class "highlight".

<p><span class="highlight">The Document Object Model (DOM) is a programming interface for HTML and XML documents.</span> It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM <strong>provides a representation of the document as a structured group of nodes and objects that have properties and methods.</strong> Essentially, it <span class="blue">connects web pages to scripts or programming languages</span>.</p>

I want to style this, so that only the text of the first sentence appears on the document. All the other sentences, should disappear. I guess it should have something to do with the css attribute display:none;, but I am not sure how to achieve this?

Answer 1

Change your HTML so that instead of having <span class="highlight"> you have a <span class="hide"> on the rest of the paragraph. Then just span.hide { display: none; } in the css.