Quel sélecteur CSS peut être utilisé pour sélectionner la première division dans une autre division ?

Question

J'ai quelque chose comme :

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Quel est le sélecteur css pour la deuxième division (première division dans la division "content") afin que je puisse définir la couleur de la police de la date dans cette division ?

Answer 1

La réponse la PLUS CORRECTE à votre question est...

#content > div:first-of-type { /* css */ }

Ceci appliquera le CSS au premier div qui est un enfant direct de #content (qui peut ou non être le premier élément enfant de #content).

Une autre option :

#content > div:nth-of-type(1) { /* css */ }

Answer 2

Vous voulez

#content div:first-child {
/*css*/
}

Answer 3

Si nous pouvons supposer que le H1 sera toujours là, alors

div h1+div {...}

mais n'ayez pas peur de spécifier l'id de la div de contenu :

#content h1+div {...}

C'est à peu près ce que vous pouvez faire de mieux en matière de navigation sans avoir recours à une bibliothèque JavaScript comme jQuery. L'utilisation de h1+div permet de s'assurer que seule la première div après le H1 reçoit le style. Il existe d'autres solutions, mais elles reposent sur des sélecteurs CSS3 et ne fonctionnent donc pas sur la plupart des installations d'IE.

Answer 4

La chose la plus proche de ce que vous recherchez est le :pseudo-classe première-enfant malheureusement, cela ne fonctionnera pas dans votre cas, car vous avez une <h1> avant le <div>s . Ce que je vous suggère, c'est d'ajouter une classe à l'interface de l'utilisateur. <div> comme <div class="first"> et de le styliser de cette façon, ou d'utiliser jQuery si vous ne pouvez vraiment pas ajouter une classe :

$('#content > div:first')