Показать только отдельные части сайта - выбрать с помощью CSS?

Question

Какой самый простой способ отобразить на сайте только определенные элементы? Например, на новостном сайте только заголовки и ничего больше.

Я бы хотел выбрать элементы с помощью CSS, поэтому должны отображаться только те элементы.
Я пытался использовать псевдокласс :not:

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

Но очевидно, что родители .myClass -элементов не отображаются, как и они. Знаете ли вы какую-либо возможность достичь этого? Это не обязательно должен быть только CSS, Javascript тоже возможен.
Веб-приложение, которое делает это, было бы замечательно.

Я бы хотел иметь возможность фильтровать некоторые посещаемые мной сайты, поэтому я бы применил это как таблицу стилей пользователя.

Answer 1

Вы можете загрузить страницу с помощью jQuery и легко выбрать нужные элементы ...

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

Выше будет загружено все элементы <div class="headline"> в тело документа.

Примечание. Разумеется, вы должны помнить о политике с тем же происхождением .

Answer 2

Я не могу понять, как комментировать вещи, поэтому в качестве ответа на последний комментарий последнего ответа проверьте это: http://selectivizr.com/. Это говорит , что может эмулировать селекторы CSS3 для IE, так что, возможно, это решит ваши проблемы с Exploder ...

Answer 3

Если вы хотите показывать только заголовки новостей, вам нужно правильно структурировать свой HTML. Если у вас есть контейнерный элемент div, самый простой способ сделать это - применить к нему вторичный класс и показать / скрыть элементы через этот класс:

<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 */

Это будет единственным решением для CSS.