web-dev-qa-db-fra.com

Équivalent CSS de: has ()

Dans l'exemple suivant:

<div class="section">
  <div class="row">...</div>
  <div class="row"> <- bottom margin here needs to be 0 ->
    <div class="section">
      <div class="row">...</div>
      <div class="row">...</div>
    </div>
  </div>
</div>

.row {
  margin-bottom:10px;
}

Si div .row est le parent de div .section, réinitialisez la marge inférieure à 0.

Je peux le faire avec jquery, mais existe-t-il un moyen de le faire en CSS?

csscss-selectorsparent
8
user3176519

Pour le moment, il n'y a aucun moyen en CSS de sélectionner l'élément parent d'un autre élément.

Cependant, dans CSS4, il y a le :has pseudo-classe - http://dev.w3.org/csswg/selectors-4/: has

le sélecteur suivant ne correspond qu'aux éléments qui contiennent un enfant:

a:has(> img)

Le sélecteur suivant correspond à un élément immédiatement suivi d'un autre élément:

dt:has(+ dt)

Le sélecteur suivant correspond aux éléments qui ne contiennent aucun élément de titre:

section:not(:has(h1, h2, h3, h4, h5, h6))

Notez que la commande est importante dans le sélecteur ci-dessus. Permutation de l'imbrication des deux pseudo-classes, comme:

section:has(:not(h1, h2, h3, h4, h5, h6))

... correspondrait à tout élément qui contient tout ce qui n'est pas un élément d'en-tête.

Il semble que vous utilisiez une fonction récursive pour générer vos sections/lignes. Peut-être ajouter une classe à la ligne si elle a des sous-sections? Ensuite, vous pouvez cibler cette classe à laquelle appliquer margin-bottom.

8
Richard Parnaby-King

Pour ce faire, appliquez un margin négatif au .section élément équivalent au standard margin de .row élément.

.row {
  margin-bottom: 20px;
}

.row > .section {
  margin-top: -20px;
}
5
Chris Herbert