web-dev-qa-db-fra.com

premier enfant ne travaille pas

Est-ce que ce travail doit devenir fou?

.project.work:first-child:before {
  content: 'Projects';
}
.project.research:first-child:before {
  content: 'Research';
}
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project research">
  <p>abcdef</p>
</div>

projects:first-child fonctionne bien, research:first-child ne colle pas. Des idées?

Démo Cela ne fonctionne pas, mais quel est le meilleur moyen d'y parvenir?

csscss-selectors
14
uriah

:first-child sélectionne uniquement le premier enfant de son parent. Rien d'autre.

Comme mentionné dans quelques-unes de mes autres réponses sur le site ( 1234 ), il n'y a pas de pseudo-classe :first-of-class. Si vous souhaitez appliquer des styles au premier de chaque classe de vos éléments div, une solution consiste à appliquer les styles à tous les enfants de cette classe, ainsi qu'à un sélecteur de frères et sœurs général pour annuler les styles des frères et sœurs suivants.

Votre CSS ressemblerait alors à ceci:

.project.work:before {
    content: 'Work';
}

.project.research:before {
    content: 'Research';
}

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before {
    content: none;
}
14
BoltClock

A partir de spécification :

Identique à :nth-child(1). La pseudo-classe :first-child représente un élément qui est le premier enfant d'un autre élément.

.project.research n'est pas le premier enfant de son parent.

1
Felix Kling

Je crois que tu veux ce CSS:

.project.work p:first-child:before {content:'Projects';}
.project.research p:first-child:before {content:'Research';}

ou

.project.work > p:first-child:before {content:'Projects';}
.project.research > p:first-child:before {content:'Research';}

Violon mis à jour

Cela correspond au premier enfant de un élément avec les classes "projet" et "travail" (ou "projet" et "recherche"). Vous n'êtes pas obligé d'utiliser p:first-child s'il peut ne pas s'agir d'un élément p, vous pouvez utiliser *:first-child à la place.

0
T.J. Crowder