Dev Faq
10
votes

Comment trouver deuxième

élément dans un

?

Quel sélecteur CSS correspond au deuxième paragraphe sans utiliser d'ID? 

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>

0 commentaires

3 Réponses :

18
votes

Vous pouvez utiliser le Nth-enfant Code> Sélecteur , défini pour trouver le deuxième enfant. Cela sélectionnera tous les éléments

code> qui sont le deuxième enfant de leur parent:

p> 

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>
<div id="wrapper">
  <p>Apple</p>
  <p>Mango</p>
</div>

0 commentaires
4
votes

Vous devez utiliser nth-enfant . xxx

ref: comment nième enfant fonctionne

0 commentaires
10
votes

Ma préférence dans cette situation serait d'utiliser le : nième de type code> pseudo-classe: xxx pré>

pourquoi choisir : NTH-of-Type Code> sur : Nth-enfant code>? strong> p>

parce que : Nth-of-Type code> est explicitement em> strong> destiné à des situations (comme celle que vous décrivez) où vous souhaitez sélectionner le NTH d'un type d'élément spécifique em> dans un contexte donné. p>

Voir cet exemple de travail: strong> p>

p> 

<div>
<h2>Fruit Bowl</h2>
<p>Apple</p>
<p>Mango</p>
</div>

2 commentaires

Bien que je suis d'accord, je pense que c'est une bonne idée de vous expliquer pourquoi C'est votre préférence, car cette explication aiderait à révéler pourquoi votre réponse est plus appropriée comme la réponse à la question de l'OP que l'autre, réponses existantes.

Oui, assez juste @Tylerh. Parmi les débutants du CSS et les pré-intermédiaires, il existe souvent une petite confusion entre : Nth-enfant et : Nth-of-Type . Une explication plus longue et plus détaillée (que j'ai maintenant fournie) n'était pas excédentaire aux exigences.

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor