Quel sélecteur CSS peut être utilisé pour sélectionner le premier div dans un autre div

95

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 le deuxième div (1er div dans le div "content") de sorte que je puisse définir la couleur de police de la date dans ce div?

css css-selectors GregH
la source
1
Veuillez accepter la réponse la plus votée, elle est certainement correcte
Barry Michael Doyle

Réponses:

224

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

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

Cela 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 */ }
Jeremy Moritz
la source
6
Convenez que c'est la SEULE réponse correcte à la question et qu'elle devrait être acceptée.
Ilya Streltsyn
Pouvez-vous me dire comment sélectionner tous les div exceptpremier / dernier div?
Tân
4
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Jeremy Moritz
@ Tân si vous voulez toutes les divs sauf le premier ET le dernier, ce serait ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Jeremy Moritz le
20

Tu veux

#content div:first-child {
/*css*/
}
Capt Otis
la source
3
Ne fonctionnera pas car ce <div>n'est pas le premier enfant (c'est <h1>).
Josh Leitzel
Sans oublier que cela ne fonctionnera pas du tout dans IE même si la date divserait le premier enfant.
Valentin Flachsel
1
Vraiment? W3 dit que ce sera le cas tant qu'un doctype est spécifié. (Honnêtement, je ne sais pas.)
Josh Leitzel
3
Je viens de lancer un test, en effet cela fonctionne si doctype est spécifié. Pour ma défense, je ne serais pas surpris si les choses commençaient à fonctionner dans IE si vous tapez <the_cake_is_a_lie> en haut du fichier ...
Valentin Flachsel
1
Je teste toujours avant de poster une réponse. Et le gâteau est un mensonge.
Capt Otis
16

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 aussi bon que vous pouvez obtenir des navigateurs multiples dès maintenant sans avoir recours à une bibliothèque JavaScript comme jQuery. L'utilisation de h1 + div garantit que seul le premier div après 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.

Stan Rogers
la source
+1. Je n'ai même pas pensé à ça. Gardez à l'esprit que cette solution ne fonctionnera pas dans IE6.
Josh Leitzel
6

La chose la plus proche de ce que vous recherchez est : la pseudo-classe 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 à <div>, comme <div class="first">, puis que vous la styliez de cette façon, ou que vous utilisiez jQuery si vous ne pouvez vraiment pas ajouter de classe:

$('#content > div:first')

Josh Leitzel
la source
1
faute d'orthographe - devrait être$('#content > div.first)
Mateusz Odelga