Další hádanka, tentokrát webová

Mějme neznámý počet prvků <div class=”prvek”>nejakyText</div> za sebou. Jak mezi každými dvěma prvky udělat horizontální čáru na jejich oddělení? A ne, žádná další čára nad prvním nebo pod posledním prvkem být nemůže :)

Podle mě nejelegantnější řešení spočívá v použití “kombinátoru vedlejšího sourozence” nebo lépe anglicky “adjacent sibling combinator” definovaného v CSS 2.1 a dobře podporovaného v IE7+, FF2+, Opera 9.5+, Safari 3+ a také třeba v Konqueroru. Jak je již z názvu patrné, tak určuje vztah mezi dvěma selektory, a to takový, že jsou to sourozenci a následují těsně po sobě. Kdybychom chtěli aby sourozenci mohli následovat nepřímo, můžeme použít jiný kombinátor (CSS 3), a to “tildu” ~ (general sibling combinator). A řešení hádanky?

div.prvek + div.prvek
{
	border-width: 1px 0 0 0;
	border-color: black;
	border-style: solid;
}

Tags: ,

Leave a Reply