CSS pour sélectionner le plus proche descendant?

À l'aide de CSS, est-il possible de sélectionner un élément de la plus proche descendant qui correspondent à un certain sélecteur?

<div class="foo"> <!-- if we're inside this -->
  <div>
    <br />
    <div class="bar"> <!-- match this -->
      <div class="bar"> <!-- but not this -->
        <div class="bar"> <!-- or this -->
        </div>
      </div>
    </div>
    <div class="bar"> <!-- I don't really care whether we match this -->
    </div>
  </div>
</div>

Qui est, quelque chose qui serait de choisir le premier .bar dans toute .foo (peu importe combien l'enfant, frère ou sœur éléments sont entre les deux), mais pas la deuxième ou la troisième .bar.

Si vous avez un deuxième .bar qui est un frère à celui que vous souhaitez utiliser, voulez-vous choisi?
Idéalement pas, mais qui serait également acceptable.
Voici la seule chose à laquelle je pense: jsfiddle.net/thirtydot/gqJdP. Très orthodoxe.
Je pense que vous avez besoin de modifier votre question avec une plus forte cas de test et une indication claire des éléments qui devraient et ne devraient pas être égalé.
Nice! Je pensais le long de ces lignes, mais ne pouvait pas tout à fait juste haha. Vous devriez poster que comme une réponse et je vais upvote pour sûr!

OriginalL'auteur JW. | 2012-06-08

  1. 13

    Voici mon hacktastic réponse: http://jsfiddle.net/thirtydot/gqJdP/2/

    /*repeat for as many levels as there could be*/
.foo > .bar,
.foo > :not(.bar) > .bar,
.foo > :not(.bar) > :not(.bar) > .bar {
    border-color: blue;
}
.bar {
    border: 1px solid red;
    padding: 10px;
}

    Me citer à partir d'un commentaire:

    Ma suggestion est viable, bien que désagréable, si vous pouvez placer une limite supérieure sur le nombre possible de parents entre .foo et la .bar vous voulez faire correspondre. Même si vous avez eu à répéter le sélecteur (disons) 10 fois, c'est pas trop mal.

    Fan-hackin'-tastic! Je ne voudrais pas l'utiliser dans mon propre CSS haha 🙂
    Celui-ci est également en supposant que l' .bar est un enfant direct...
    Pas tout à fait. Examiner le sélecteur soigneusement. Je suppose que c'est un enfant direct de .foo, ou un enfant direct de tout ce qui n'est pas .bar c'est un enfant direct de .foo, ou <création blague ici>.
    Ah! Maintenant je le vois. Je pense que je dois être braindead aujourd'hui. Je n'ai jamais entendu parler de :not, c'est plutôt sympa. Ce fut une bonne leçon pour moi. Aussi, j'espère que les OP ne va pas plus de 5 niveaux de profondeur.... <création blague>
    +1 pour le distasteful évaluation

    OriginalL'auteur thirtydot

  2. 2

    Non, il n'y a aucun moyen de faire ce que vous demandez complètement en utilisant uniquement CSS. Vous pouvez sélectionner le nth-child ou nth-of-type, mais pas the-nth-item-matching-this-selector.

    Comme une "preuve", revue de la liste des sélecteurs CSS3 disponibles (qui couvre toutes les capacités de CSS1 et CSS2.1):

    http://www.w3.org/TR/selectors/

    Vous aurez besoin d'utiliser JavaScript (sur le client) ou côté serveur de manipulation (par exemple, en annotant le premier élément à une classe spéciale).

    Modifier: Basé sur votre montage, vous pouvez faire:

    .foo .bar      { font-weight:bold; color:red }
.foo .bar .bar { font-weight:normal; color:black }

    c'est à dire que vous devez explicitement "annuler" le style appliqué sur les ancêtres qui serait hérité. C'est "fragile"—si vous modifiez un style sur un ancêtre, vous devez également changer la valeur sur "remplacer" la règle—mais efficace.

    Et, si @thirtydot les messages de son hack comme une réponse, nous pouvons tous accepter que, trop.

    Bien qu'il n'est probablement pas aider, notez aussi que vous pouvez atteindre cet objectif avec XPath.

    Nous sommes censés obtenir nth-matching dans CSS4 (chaque fois que c'est), mais je ne vois pas comment cela pourrait aider dans ce cas.
    Avec nth-matching il serait juste .foo .bar:nth-matching(1), droit?
    Bonne suggestion sur l'annulation.

    OriginalL'auteur Phrogz

  3. -3

    Cela ne devrait obtenir le premier élément enfant de .foo:

    .foo > .bar

    Et ne pas sélectionner plus loin en bas de la chaîne.

    -1 Comme le montre l'exemple de code, l' .bar est pas nécessairement un enfant direct.
    Vrai. Ne pas voir que. Non pas que les divs doit être à l'intérieur des balises p de toute façon.
    Oui, vous avez raison à ce sujet. Je l'ai corrigé dans la démo dans ma réponse.
    Fixe que dans la question.

    OriginalL'auteur Steph Rose