web-dev-qa-db-fra.com

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

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 div (1ère div de la div "content"), de sorte que je puisse définir la couleur de police de la date dans cette div?

csscss-selectors
85
GregH

La réponse la plus correcte à votre question est ...

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

Cela appliquera le CSS à la première 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 */ }
192
Jeremy Moritz

Tu veux

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

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 content:

#content h1+div {...}

C'est à peu près aussi bon que vous pouvez obtenir multi-navigateur maintenant sans avoir recours à une bibliothèque JavaScript comme jQuery. L'utilisation de h1 + div garantit que seul le premier div après le H1 obtient le style. Il existe des alternatives, mais elles reposent sur des sélecteurs CSS3 et ne fonctionneront donc pas sur la plupart des installations IE.

16
Stan Rogers

La chose la plus proche de ce que vous recherchez est la : pseudoclass du premier enfant ; Malheureusement, cela ne fonctionnera pas dans votre cas car vous avez un <h1> avant le <div>s. Ce que je suggérerais, c'est que vous ajoutiez une classe au <div>, Comme <div class="first">, Puis l'appelez de cette façon, ou utilisez jQuery si vous ne pouvez vraiment pas ajouter de classe:

$('#content > div:first')

6
Josh Leitzel