CSS скрывает все элементы из класса, кроме первого в IE6 - PullRequest
Новая
       2

CSS скрывает все элементы из класса, кроме первого в IE6

1 голос
/ 11 марта 2012

Я ищу способ скрыть все элементы определенного класса, кроме первого. Я действительно понимаю, что есть способы сделать это в javascript, но эта функциональность была бы для тех без включенного javascript - следовательно, поэтому я ищу решение CSS only , если есть любой. 

<div class="foo">Content 1</div> //not hidden
<div class="foo">Content 2</div> //hidden
<div class="foo">Content 3</div> //hidden

Я могу добиться этого, используя псевдо-класс first-child, например: 

.foo:first-child {
    display:block;
}
.foo {
    display:none;
}

Но поскольку IE6 не поддерживает этот псевдо-класс, он не будет работать. К сожалению, я не могу отменить поддержку IE6 (вздох), поэтому я ищу способ добиться этого без использования этого конкретного селектора.

Спасибо!

Ответы [ 3 ]

4 голосов
/ 11 марта 2012

использовать класс того же стиля, что и запасной вариант. так как я не уверен, поддерживает ли IE6 цепочку (насколько я знаю, нет), используйте контейнер для указания. 

/*hide all foo*/
.container .foo {
    display:none;
}

/*as suggested, might as well do this and drop the others altogether*/
.container .first-child { 
    display:block;
}

<div class="container">
    <div class="foo first-child">Content 1</div> //not hidden
    <div class="foo">Content 2</div> //hidden
    <div class="foo">Content 3</div> //hidden
</div>
1 голос
/ 11 марта 2012

При данной разметке решение CSS только для IE6 невозможно. Невозможно нацелиться на первого ребенка, только общее правило для всех потомков.

0 голосов
/ 11 марта 2012

Это все, что я могу вспомнить ... 

<div class="foo">Content 1</div>
<!--[if IE 6]><div style="display:none"><![endif]-->
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<!--[if IE 6]></div><![endif]-->​

ИЛИ 

<div class="foo">Content 1</div>
<noscript><div style="display:none"></noscript>
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<noscript></div></noscript>​

Пример: http://jsfiddle.net/FkCzB/

...