Comments 27
В вебките заметил странную проблему: При выборе галочек для изменения значения необходимо «передёрнуть» последнюю. Не понял, чем это вызвано, но очень похоже на первую проблему.
Выпадающее меню с использованием :checked. Страница предназначена для небольших экранов, поэтому чтобы увидеть в действии — сожмите окно браузера < 800px.
Пошел на qutim.org и проверил, не вышла ли новая версия :) Вы зачем qutIM упомянули? :)
Предлагаю вместо сестринского селектора использовать классы и селектор обобщенных родственных элементов. Код более удобочитаемый. Ваш подправленный пример.
UFO landed and left these words here
Интересно. Тоже на радиобаттонах, но немного другой вид.
Воистину, всё придумано до нас.
Прочитав статью решил по экспериментировать, ниже реализация с использованием input:focus:

HTML:
<section>

		<input type="text" value=" "/>		
		<input type="text" value=" "/>
		<input type="text" value=" "/>

		<hr/>

		<article>Text 1</article>
		<article>Text 2</article>
		<article>Text 3</article>	
	
	</section>


CSS:
		input
		{
			text-indent: -999999px;
			cursor: pointer;
			border: 0;
			outline: none;
			background: #0F0;
			width: 50px;
		}

		input:focus
		{
			background: #F00;
		}

		input:focus + input + input + hr + article,
		input:focus + input + hr + article + article,
		input:focus + hr + article + article + article
		{
			display: block;
		}

		article
		{
			display: none;			
		}

		/* Hack for Webkit */
		section {-webkit-animation: 0.1s hack infinite}
		@-webkit-keyframes hack{from{margin:0;padding:0}to{margin:0;padding:0}}

Тогда уж как в примере по ссылке, делать текст обычным value и ставить атрибут readonly.
Но, гм, зачем, если текст во вкладке нельзя выделить, ибо фокус сбросится?
Интересно, почему для реализации одного логического элемента надо обязательно использовать элемент с совершенно другой логикой и перецарапать полностью его поведение?
UFO landed and left these words here
Прошу пардона, комментарий ниже — отвкт, просто пишу с андроида и меня проглючило на местоположенме формы ответа.
Общность, равноценная общности кошки с попугаем по критериям количества глаз на голове. По мне так тут больше подходит список определений, пушо табы это не выбор опции, это выбор показывать контент, релевантный заголовку в табе, который этот контент определяет. Плюс вот тебе и ярлыки, вот тебе и сменные области, вот тебе и замыкающая оболочка, не говоря уже о простоте стилевого и скриптового контроля.
Список определений, имхо, куда меньше подходит. Заголовок таба же это нечто вроде тултипа или лабела :) — так, справочная информация для удобства. Но никак он контент не определяет.
Опять сглючило :D Ответ ниже. Думаю, я лучше в следующий раз с работы отвечу, а то дискуссия будет отличаться визуальной алогичностью.
UFO landed and left these words here
Ну в табе с заголовком «Кошка» инфу про попугая никому же не придет в голову искать, согласны? Чем не определение контента соответствующего таба и чем не повод считать длку подходящей для этой структуры?
Для табов с контентом, который содержит определения это логично. Но и всё, пожалуй. Чаще же заголовок таба это именно заголовок, метка. Семантически лучше всего подходит в общем случае section и h[1-6], по-моему. Но у h нет :checked :( впрочем как и у списков.
Имхо, если уж сязались с CSS3, то можно сделать проще:
	#tab1:checked ~ article:nth-of-type(1),
	#tab2:checked ~ article:nth-of-type(2),
	#tab3:checked ~ article:nth-of-type(3),
	#tab4:checked ~ article:nth-of-type(4) {
		display: block;
	}

В этом случае ваш хак с анимацией не нужен, работает и без него.

Есть и другой вариант, для этого нужно добавить либо id для <article>, либо другой атрибут с уникальным значением, например:

<input type="radio" id="tab1" name="radiobutton" checked="checked"/>
<label for="tab1" class="tabs">qutIM 0.1</label>
...
<article class="contenttab" tabcontent="tab1">
	qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
</article>

После чего правила становятся проще:
 	#tab1:checked ~ [tabcontent="tab1"],
 	#tab2:checked ~ [tabcontent="tab2"],
 	#tab3:checked ~ [tabcontent="tab3"],									
 	#tab4:checked ~ [tabcontent="tab4"] {
 		display: block;
 	}
Only those users with full accounts are able to leave comments. Log in, please.