Нет реакции на :target. Где я ошибся?

Question

[Nick Krogan]

Пытаюсь сверстать аккордеон на css, для этого использую :target, но реакции нет.
codepen.io/Nick_Krogan/pen/YpZoqg
Не работает только связка .wwd_tabs:target h3 + div. Где я ошибся? пару часов уже копаюсь, не пойму в чем дело.

Comments

[Сергей Горячев]

Не надо вываливать всю простыню кода. Оформи песочницу нормально, на jsfiddle например.

[Ivanq]

Замените всю простыню на ссылку, пожалуйста. https://jsfiddle.net/Ivanq/gm05az71/

[Ivanq]

Ох. Помню, у меня было похожее. В двух словах, :target не наследуется.

htmlbook пишет:

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Если у Вас есть <div id="a"><div id="b"></div></div> и Вы перешли на #b, то условие #b:target выполнится, а #a:target - нет.

[Nick Krogan]

Sergey Goryachev: заменил

[Nick Krogan]

Ivanq: как тогда правильно сделать? или не играться с css аккордеоном, а сделать на js? но его я только учу еще

Answer 1

[Ivanq]

Дошло. Долго же я думал.

#one:target h3 + div {
  height: 100px;
}

У Вас .wwd_tab-cont и так вложен и в .wwd_tabs, и в #one. Заменяем .wwd_tabs:target h3 + div на #one:target h3 + div.

Плюс h3 + div можно заменить на .wwd_tab-cont, если у вас только один такой элемент

Comments

[Nick Krogan]

должно быть три вкладки. первая сразу открыта при загрузке страницы, остальные открываются по клику и закрывают предыдущую открытую. Спасибо Вам за правильный толчок в нужном направлении! теперь буду стилизовать остальные блоки и думать, как сделать, что бы при открытии блока стрелка переворачилась))

[Ivanq]

Nick Krogan: Переворачилась?
Ну ок, если анимировать, то в отдельном элементе и transform: rotate(90deg).
Если не анимировать, то background-image менять

[Nick Krogan]

Ivanq: сделал через :before и :after. там в строке получается два элемента - иконка c левого краю и стрелочка с правого. меня через bgi имеете ввиду при :target?

[Ivanq]

Nick Krogan: Ну да. У вас правильно.