web-dev-qa-db-fra.com

Utiliser le sélecteur du dernier enfant

Mon objectif est d’appliquer le CSS sur le dernier li, mais cela ne se produit pas.

#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>

Comment puis-je sélectionner niquement le dernier enfant?

csscss-selectors
106
Miral

Le :last-child La pseudo-classe ne peut toujours pas être utilisée de manière fiable sur les navigateurs. En particulier, les versions d'Internet Explorer <9 et Safari <3.2 définitivement ne le supporte pas , bien que Internet Explorer 7 et Safari 3.2 fassent soutien :first-child, curieusement.

Votre meilleur choix est d’ajouter explicitement un last-child (ou similaire) à cet élément, et applique li.last-child au lieu.

171
VoteyDisciple

Une autre solution qui pourrait fonctionner pour vous consiste à inverser la relation. Vous définissez donc la bordure pour tous les éléments de la liste. Vous utiliseriez ensuite first-child pour éliminer la bordure du premier élément. Le premier enfant est statiquement pris en charge par tous les navigateurs (ce qui signifie qu'il ne peut pas être ajouté de manière dynamique via un autre code, mais first-child est un sélecteur CSS2, alors que last-child a été ajouté dans la spécification CSS3).

Remarque: cela ne fonctionne comme prévu si vous n’avez que 2 éléments dans la liste, comme dans votre exemple. Tout 3ème élément et sur aura des frontières appliquées à eux.

76
Branden Silva

Si vous pensez que vous pouvez utiliser Javascript, alors depuis jQuery supporte last-child, vous pouvez utiliser la méthode css de jQuery et l’avantage de supporter presque tous les navigateurs

Exemple de code: 

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

Vous pouvez trouver plus d’informations sur ici: http://api.jquery.com/css/#css2

43
Tarik

Si le nombre d’éléments de la liste est fixe, vous pouvez utiliser le sélecteur adjacent, par ex. si vous n'avez que trois <li> éléments, vous pouvez sélectionner le dernier <li> avec:

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

Si vous recherchez fréquemment des sélecteurs CSS3, vous pouvez toujours utiliser la bibliothèque selectivizr sur votre site:

http://selectivizr.com/

C'est un script JS qui prend en charge la quasi-totalité des sélecteurs CSS3 pour les navigateurs qui, autrement, ne les prendraient pas en charge.

Jetez-le dans votre <head>tiquette avec un IE conditionnel:

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

la pseudo-classe last-child ne fonctionne pas dans [~ # ~] c'est-à-dire [~ # ~]

Compatibilité CSS et Internet Explorer

Sélecteurs CSS IE7: comment ils échouent

3
rahul

Une autre façon de le faire consiste à utiliser le sélecteur last-child dans jQuery, puis à utiliser la méthode .css (). Soyez fatigué cependant, car certaines personnes sont encore à l'âge de pierre en utilisant des navigateurs désactivés par JavaScript.

0
ecollis6

Au lieu d'utiliser une classe, vous pouvez utiliser une liste détaillée, définissant les éléments enfant dt sur un style et les éléments enfant dd sur un autre. Votre exemple deviendrait:

#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>

Aucune méthode n'est meilleure que l'autre et c'est simplement une préférence personnelle.

0
lexx

Si vous faites flotter les éléments, vous pouvez inverser l'ordre

c'est à dire. float: right; au lieu de float: left;

Et utilisez ensuite cette méthode pour sélectionner le premier enfant d'une classe.

/* 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;
}

En réalité, cela applique la classe à la dernière instance uniquement parce qu'elle est maintenant inversée.

Voici un exemple de travail pour vous:

<!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

Pourquoi ne pas appliquer la bordure au bas de l'UL?

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