Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: выбрать все блоки кроме первого
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » выбрать все блоки кроме первого

Страниц (1): [1]
 

1. alexiy - 26 Ноября, 2013 - 13:24:27 - перейти к сообщению
есть
CODE (html):
скопировать код в буфер обмена
  1.  
  2.  <div class="item"></div>
  3.  <div class="item"></div>
  4.  <div class="item"></div>
  5.  <div class="item"></div>
  6.  <div class="item"></div>
  7.  <div class="item"></div>
  8.  

как скрыть все блоки кроме самого первого используя css?
2. Deonis - 26 Ноября, 2013 - 13:45:17 - перейти к сообщению
CODE (css):
скопировать код в буфер обмена
  1. .item {
  2.     display: none;
  3. }
  4. /* Теперь или так: */
  5. .item:first-child {
  6.     display: block;
  7. }
  8. /* или так (IE 8-ой и ниже версии не поддерживает): */
  9. .item:nth-of-type(1){
  10.     display: block;
  11. }
3. imya - 26 Ноября, 2013 - 13:49:26 - перейти к сообщению
first-child неккоректно использовать, так как он применется для дочернего элемента, а тут все на одном уровне.
4. IllusionMH - 26 Ноября, 2013 - 13:53:02 - перейти к сообщению
alexiy, добавить класс первому, либо :first-child (если нужно :nth-child)
5. Deonis - 26 Ноября, 2013 - 13:54:01 - перейти к сообщению
imya пишет:
first-child неккоректно использовать
Было бы странно, если бы у этих блоков не было "родителя". Но даже при такой не корректной записи, работать все-таки будет.
6. IllusionMH - 26 Ноября, 2013 - 13:54:25 - перейти к сообщению
imya, для элемента который является первым дочерним у своего родителя.
Все ок, кроме того, что автор выкинул огрызок разметки который ни к чему не относится и просит показывать только первый.
7. alexiy - 26 Ноября, 2013 - 13:59:38 - перейти к сообщению
IllusionMH
именно так,
но есть вопрос дополнительный, скажем первый блок (display:block;) потом когда я жму на кнопку скажем показывается следующий блок который(display:none;), нажал еще раз, показался следующий скрытый блок и так далее, как именно выбирать последний элемент, у которого display:block?
8. Deonis - 26 Ноября, 2013 - 14:05:15 - перейти к сообщению
alexiy пишет:
когда я жму на кнопку скажем показывается следующий блок
Средствами CSS этого не сделать. Тут уже подключайте в работу JS.
9. alexiy - 26 Ноября, 2013 - 14:08:35 - перейти к сообщению
Deonis
вопрос и не к вам!
10. IllusionMH - 26 Ноября, 2013 - 14:13:30 - перейти к сообщению
alexiy, как писалось раньше: добавляйте класс visible. И в js ищите/запоминайте индекс элемента который видимый, добавляйте класс следующему, и так сколько нужно. Если нужно - убирайте класс у предыдущего элемента.
Элементарная ж логика.
И не нужно рассказывать кому был вопрос, а кому нет. Вам все правильно ответили, это решается на JS, а не CSS.
11. imya - 26 Ноября, 2013 - 14:26:46 - перейти к сообщению
IllusionMH пишет:
imya, для элемента который является первым дочерним у своего родителя.


Видимо я неккоректно понимаю смысл этого выражения... Растерялся
Я думал так:

CODE (htmlphp):
скопировать код в буфер обмена
  1. <div class="parent">
  2. <div class="child"></div>
  3. </div>


Если для класса parent прописать first-child , эти стили отработают только для child. Что ж, был неправ.
12. IllusionMH - 26 Ноября, 2013 - 14:31:24 - перейти к сообщению
imya, ага. Тоже прочитал бегло про :nth-child и не мог понять почему ul:nth-child(3) не работает Улыбка
Просто стоит рассматривать псевдоклассы как "свойства"(либо условия к "свойствам") данного объекта.
И не стоит путать с псевдоэлементами, котjрые правильно записывать ::before
13. imya - 26 Ноября, 2013 - 14:58:43 - перейти к сообщению
IllusionMH пишет:
Просто стоит рассматривать псевдоклассы как "свойства"(либо условия к "свойствам") данного объекта.


Спасибо за расжовывание Поклон Улыбка
14. DelphinPRO - 26 Ноября, 2013 - 15:20:48 - перейти к сообщению
вот правильное и красивое решение:

CODE (css):
скопировать код в буфер обмена
  1. .item:not(:first-child) {
  2.     display: none;
  3. }


http://jsfiddle[dot]net/8JdXH/1/

PS Конечно, при условии, что поддержка IE8 не требуется Голливудская улыбка
15. IllusionMH - 26 Ноября, 2013 - 15:34:02 - перейти к сообщению
del.

 

Powered by ExBB FM 1.0 RC1