it-swarm.com.ru

последний ребенок класса div

Я заканчиваю свою веб-страницу WordPress и хочу стилизовать (с помощью CSS) список записей на странице сообщений. Wordpress создает это: 

<div class="entry">

На странице есть множество этих элементов, чтобы разделить их, я использовал границу внизу записи. Проблема в том, что я не хочу эту границу для последней записи. Может быть что-нибудь подобное сделано в CSS? (Обратите внимание, что это не список, поэтому я не могу использовать псевдоклассы)

Вот CSS, это довольно просто:

.entry{  border-bottom: 1px solid yellow; }

HTML:

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

Заранее спасибо за помощь.

8
Tom11

Вы уже назвали то, что ищете: last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

Так что используйте .entry:not(:last-child) { border-bottom: 1px solid yellow; }

Обратите внимание, что это не список, поэтому я не могу использовать псевдоклассы)

JSYK, псевдокласс не зависит от того, какой элемент содержит список. Если вы имели в виду, что последний элемент .entry на самом деле не является последним дочерним элементом своего контейнера, его все равно можно будет выбрать. Но я не могу сказать вам, как, если вы не покажете мне, как выглядит фактическая разметка.

Если за вашим последним div.entry не следуют никакие другие элементы div, тогда селектор .entry:not(:last-of-type) будет работать для вас.

12
tuff
.entry:last-child {
  border-bottom: none;
}

Допустим, у вас есть список <li> со ссылками <a> внутри, и вы хотите получить последний <a> из <li> 's . Просто используйте:

.entry:last-child a {
  border-bottom: none;
}

Это выберет последний из .entry и нацелит его ссылку (и)

6
JimmyRare

Довольно простое решение:

#wrapper :last-child
{
    border:none;
}
4
Ishwor

Для наиболее полной поддержки браузера, я бы порекомендовал использовать это:

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
0
Kevin Boucher