Comment dois-je cibler uniquement les éléments qui sont suivies par un autre (spécifique) de l'élément?

J'ai un code qui est généré par Drupal vue. Il ressemble à ceci (dépouillé vers le bas pour plus de clarté):

<div class="group_content">
  <h3>Header Link</h3>
  <div class="row odd">Here's some content</div>
  <h3>Another Header Link</h3>
  <div class="row even">Here's some more content</div>
</div>

<div class="group_content">
  <h3>Header Link 2</h3>
  <div class="row odd">Here's some content 2</div>
</div>

Parce que c'est généré par un CMS, il y a une limite à ce que je peux faire le rendu de code - par exemple, je ne peux pas ajouter un pair/impair de classe pour le h3 éléments.

Comment puis-je (en css) cible uniquement les div class=row qui est suivie par une autre div class=row? Si il y a plus d'une ligne dans un groupe, je dois ajouter une bordure en bas de la div pour agir comme un séparateur. Donc, en utilisant mon code d'exemple, il y aurait une frontière appliquée à div class="row odd">Here's some content</div> parce qu'il a une autre ligne suivante.

Je suis un développeur backend, de sorte que le CSS n'est pas mon point fort. Nous avons besoin de soutien IE7.

Autant que je sache, vous ne pouvez pas affecter css pour parent basé sur child.Vous aurez besoin d'utiliser javascript à cette fin.
La relation n'est pas parent/enfant - les divs sont pas des enfants de la h3, ils suffit de les suivre.
Désolé, mon mauvais. J'ai ajouté une solution de contournement si

OriginalL'auteur EmmyS | 2012-06-05

  1. 10

    Modifié La Logique

    Car vous avez besoin d'IE7 soutien, place de la frontière sur le h3 élément à la place:

    div.row + h3 {
    border-top: 1px solid black;
}

    Cela fonctionne à peu près tous les navigateur moderne, et IE7:

    Violon: http://jsfiddle.net/jonathansampson/BjUf9/1/

    Explicite Sujets dans les Sélecteurs

    Si vous insistez sur le plaçant uniquement sur chaque div.row mais la dernière, c'est une autre histoire. Vous vous posez la question sur le déplacement de l'objet d'un sélecteur, ce qui n'est pas possible actuellement, mais sera quand mettre en œuvre les navigateurs de Niveau 4 sélecteurs:

    div.row! + div.row {
    /* These styles apply to the first div.row
       $div.row + div.row is another potential 
       syntax */
}

    :dernier enfant, dans IE9+

    Puisque vous ne pouvez pas le faire, ce que vous pouvez faire est de définir un style pour tous les div.row éléments, en ajoutant à la frontière, et puis en substituant, pour tout div.row:last-child qui permettra d'éliminer la frontière pour toute div.row qui est le dernier élément de son parent:

    div.row {
    border-bottom: 1px solid #333;
}
div.row:last-child {
    border-bottom: 0px;
}

    Violon: http://jsfiddle.net/jonathansampson/BjUf9/

    Je tiens à noter que cela ne fonctionne pas dans IE7, malheureusement. Mais de la modification de la logique présentée dans la première solution doit prendre soin de vous.

    malheureusement last-child ne fonctionne pas sur IE7 (alors que first-child fonctionne très bien)
    A l'WD mis à jour, ou vous basez votre CSS4 réponses hors de l'ED maintenant? (Des choses comme le sujet jeton est pour ça que je suis en train de penser tenue hors de toute mention de la CSS4 dans mes réponses, désormais...)
    Vous avez raison. Je pensais à la sélecteurs CSS 2.1. Edit à venir.
    Si elle ne s'affiche pas dans IE7, nous allons nous en occuper. Tant que cela ne cause pas de quelque chose d'autre à la pause.
    Je ne me souviens pas qui a utilisé $ et qui !. En général, je mentionner que les deux syntaxes sont flottant autour.

    OriginalL'auteur Sampson

  2. 2

    vous pourriez revenir à la logique et appliquer un border-top à .row + .row éléments

    .row + .row {
   border-top : 1px #ccc solid;
}

    adjacentes sélecteur de frères (+) fonctionne très bien sur les IE7+

    OriginalL'auteur fcalderan

  3. 0

    Cela fonctionne pour moi sur ie7 et d'autres

    .row + h3 {
  border-top : 1px black solid;
}

    OriginalL'auteur Jashwant