Sélectionnez l'élément spécifique devant d'autres élément

J'ai suivantes structure HTML:

<div>
  <h2>Candy jelly-o jelly beans gummies lollipop</h2>
  <p>
    Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
  </p>
  <p>
    Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee  chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu. 
  </p>
  <h2>Dessert pie cake</h2>
  <ul>
    <li>liquorice</li>
    <li>powder</li>
    <li>dessert</li>
  </ul>
  <h2>Chupa chups sweet dragée</h2>
  <p>
    Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee.
  </p>
</div>

Je voudrais choisir seulement que h2 qui est directement avant ul. Comment puis-je faire cela? Dans mon contenu, il ya beaucoup plus de uls et beaucoup plus h2s donc la solution doit être universelle.

OriginalL'auteur user1292810 | 2012-04-19

  1. 17

    Autant que je sache, le CSS ne pas offrir n'importe quel sélecteurs qui cible avant d'un sélecteur. Pourriez-vous sélectionner en tant que h2 qui est directement après un p (p + h2)?

    h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

    Exemple sur JSFiddle

    Comme vous pouvez le voir, c'est probablement le meilleur sélecteur vous pouvez utiliser si vous êtes en s'appuyant sur le CSS, bien que vous pourriez facilement il suffit d'ajouter une classe pour chaque h2 qui est devant ul. Qui permettrait d'éviter le cas où vous avez un paragraphe de la section avant de l'autre h2 et le paragraphe de la section.

    Vous pouvez le faire à l'aide de jQuery:

    .highlight {
    color: #0cc;
}

$('ul').prev('h2').addClass('highlight')

    Exemple sur JSFiddle

    Cela sélectionne tous les ul, puis sélectionne le h2 qui est devant elle, avant de terminer par l'ajout de la .highlight de classe à elle.

    Merci pour votre réponse. Je savais à propos de jQuery solution, mais je me demandais si cela peut être fait en pur CSS.
    Je suis en train de sélectionner d'abord l'ancre avant de supprimer mon lien , et je ne peux pas faire a lien à l'intérieur de dautres a lien , comme ceci <a href="file.exe">file.exe</a> <a href="" class="dlt">✖</a> la seule solution workes sont avec JQuery ,

    OriginalL'auteur djlumley

  2. 0

    avec cela, vous pouvez style que le premier élément h2

    h2:first-child { color:red; }

    pour la prise en charge du navigateur lire ici:
    http://www.quirksmode.org/css/contents.html#t17

    OriginalL'auteur alphanyx

  3. 0

    Vous devez utiliser cette

    div h2::nth-child(2) {

}
    ancien navigateur ne prend pas en charge cette speciale.. <ie8 | lire ici: quirksmode.org/css/contents.html#t38
    Dans mon contenu, il sont beaucoup plus h2s et beaucoup plus uls donc, la solution devrait être plus universel.

    OriginalL'auteur Mateusz Rogulski

  4. -2

    Vous pouvez utilisez le sélecteur de frères ~.

    Dans votre cas, vous pouvez utiliser h2~ul qui s'appliquent à l'h2 avant ul l'intérieur d'un même parent.

    Malheureusement, il l'habitude. Elle s'applique à tous h2 après ul l'intérieur d'un même parent.

    OriginalL'auteur davidaam