Установите border-bottom на другой цвет, если следующий элемент относится к определенному классу - PullRequest
Новая
       4

Установите border-bottom на другой цвет, если следующий элемент относится к определенному классу

1 голос
/ 05 марта 2011

Что происходит

Я столкнулся с проблемой. У меня есть такое меню: 

<div id='feeds'>
  <div class='feed'>Super Dense</div>
  <div class='feed'>Everything</div>
  <div class='feed current-feed'>Smashing Magazine Feed</div>
  <div class='feed'>Hot Questions - Stack Exchange</div>
</div>

Я оформляю это с помощью CSS (здесь отображаются только свойства границ и фона): 

.feed {
  background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
  border-bottom: solid 1px #AAA;
  border-left: solid 1px #AAA;
  border-right: solid 1px #AAA;
}

.feed:first-child {
  border-top: solid 1px #AAA;
}

.feed.current-feed, .feed:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}

.feed.current-feed:first-child, .feed:active:first-child {
  border-top: solid 1px #000;
}

Это результат ( просмотр на jsFiddle Только WebKit):
screenshot 1

Да, Джефф, весь дополнительный трафик фидов Stack Exchange приходит от меня, постоянно перезагружающего мой читатель фидов. Извините:)

Проблема

Это может выглядеть красиво, но есть небольшая проблема. Над черным ящиком есть линия #AAA, и это выглядит не очень (пиксельное совершенство):
screenshot 2

Мой вопрос

Есть ли способ в CSS проверить, принадлежит ли следующий элемент определенному классу, поэтому я могу установить border-bottom в solid 1px #000 или есть другой способ решить мою проблему?

Мое веб-приложение интенсивно использует JavaScript, поэтому, если это требуется, это не проблема, но, на мой взгляд, CSS чище.

Ответы [ 2 ]

3 голосов
/ 05 марта 2011

Один способ, которым я могу придумать:

Положение каждого .feed относительно: 

.feed {
    position: relative;
    /* ... */
}

Затем найдите следующего ближайшего брата с помощью комбинатора +, заставьте его сидеть над егопредыдущий брат использует большее z-index и отрицательное поле и задает ему желаемую границу (обратите внимание, что это top border): 

.feed + .feed.current-feed, .feed + .feed:active {
    margin-top: -1px;
    border-top: 1px solid #000;
    z-index: 1;
}

Верхняя черная граница будет сидетьвыше нижней границы предыдущего брата и, таким образом, будет виден над ней.Блочная модель W3C означает, что высота содержимого каждого .feed не затрагивается, поэтому одинаково толстое отрицательное поле - это все, что вам нужно для противодействия толщине добавленной верхней границы.

Посмотрите на Предварительный просмотр и посмотреть, если это то, что вы ищете.Также скриншот:

0 голосов
/ 05 марта 2011

Вы можете использовать функцию jQuery .parent(), чтобы сделать это:

http://api.jquery.com/parent/

JSFiddle

...