Show just particular parts of website - select via CSS?

what would be the easiest method to display only specific elements on a website? For example, on a news site only the headlines and nothing else.

I'd like to select elements via CSS so only those should be displayed.

I tried to use the :not pseudoclass:

:not(.myClass) { display: none; }

But obviously, the parents of the .myClass-elements aren't displa开发者_运维知识库yed and so aren't them. Do you know any possibility to achieve this? It doesn't have to be CSS-only, Javascript is possible too.

A web-app that does this would also be great.

I'd like to be able to filter some sites I visit, so I would apply this as a user-stylesheet.

You can load the page with jQuery and easily select the elements you want...

$("body").load("path/to/page.html div.headline");

The above will load all <div class="headline"> elements into the body of the document.

Note: You will of course have to keep the same origin policy in mind.

If you want to show only the news headline you will need to structure your HTML correctly. If you have a container div the easiest way to do this would be to apply a secondary class to it and show/hide elements trough that class:

<div class="container news_page">
<h1>Title</h1>
<p>Random text I want to hide.<p>
<div class="random_container">Another random element i want to hide.</div>
</div>

.container {border:1px solid red;} /* .container has normal styling */
.news_page p, .news_page .random_container {display:none;} /* .news_page is used only to select elements inside container on news page */

This would be the css only solution to this.

I can't figure out how to comment on things, so as a response to the last answer's last comment, check this out: http://selectivizr.com/. It says it can emulate CSS3 selectors for IE, so maybe that will fix your problems with Exploder...