it-swarm.com.ru

Использование селектора последнего ребенка

Моя цель - применить CSS к последнему li, но он этого не делает.

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
        <ul id="nav">
                <li><a id="abc" href="#">abcde</a></li>
                <li><a id="def" href="#">xyz</a></li>
        </ul>
    </div>

Как я могу выбрать только последний ребенок?

106
Miral

Псевдокласс :last-child все еще не может быть надежно использован во всех браузерах. В частности, версии Internet Explorer <9 и Safari <3.2 определенно не поддерживают , хотя Internet Explorer 7 и Safari 3.2 делают поддержка :first-child, любопытно.

Лучше всего явно добавить класс last-child (или аналогичный) к этому элементу и вместо этого применить li.last-child.

171
VoteyDisciple

Другое решение, которое может работать на вас, - это изменить отношения. Таким образом, вы должны установить границу для всех элементов списка. Затем вы бы использовали first-child, чтобы убрать границу для первого элемента. First-child статически поддерживается во всех браузерах (то есть он не может быть добавлен динамически через другой код, но first-child является селектором CSS2, тогда как last-child был добавлен в спецификации CSS3)

Примечание. Это работает только так, как вы и предполагали, если в списке только 2 элемента, как в вашем примере. К любому третьему элементу и к нему будут применены границы.

76
Branden Silva

Если вы думаете, что можете использовать Javascript, то, поскольку jQuery поддерживает last-child, вы можете использовать метод jQuery css, и хорошо, что он будет поддерживать почти все браузеры.

Пример кода:

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

Вы можете найти больше информации здесь: http://api.jquery.com/css/#css2

43
Tarik

Если количество элементов списка фиксировано, вы можете использовать соседний селектор, например, если у вас есть только три элемента <li>, вы можете выбрать последний <li> с помощью:

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}
19
ccpizza

Если вам часто нужны CSS3-селекторы, вы всегда можете использовать библиотеку selectivizr на своем сайте:

http://selectivizr.com/

Это JS-скрипт, который добавляет поддержку почти всех селекторов CSS3 в браузеры, которые иначе не поддерживали бы их.

Добавьте его в свой тег <head> с условным обозначением IE:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
13
nzifnab
3
rahul

Другой способ сделать это - использовать селектор last-child в jQuery, а затем использовать метод .css (). Но будьте измотаны, потому что некоторые люди все еще находятся в каменном веке, используя отключенные JavaScript браузеры.

0
ecollis6

В качестве альтернативы использованию класса вы можете использовать подробный список, задав для дочерних элементов dt один стиль, а для дочерних элементов dd - другой. Ваш пример станет:

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

hTML:

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

Ни один из методов не лучше другого, и он зависит только от личных предпочтений.

0
lexx

Если вы перемещаете элементы, вы можете изменить порядок

т.е. float: right; вместо float: left;

А затем используйте этот метод, чтобы выбрать первого ребенка в классе.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Это фактически применяет класс к экземпляру LAST только потому, что он теперь в обратном порядке.

Вот рабочий пример для вас:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
0
Ozzy

Почему бы не применить границу к нижней части UL?

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}
0
pork-chop