web-dev-qa-db-fra.com

Comment cibler un sélecteur uniquement s'il n'est PAS enfant d'un élément spécifique (donc uniquement s'il s'agit de la racine)

Je ne comprends pas pourquoi le code suivant n'a pas le comportement souhaité:

    .toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }
  <div class="container">
      <a href="#!" class="toggle">Toggle</a>
      <ul class="list">
        <li><a href="#!">Link 1</a></li>
        <li>
          <div class="container">
            <a href="#!" class="toggle">SubToggle</a>
            <ul class="list">
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

Je pensais que l’utilisation de :not() aurait pour conséquence d’appliquer "gras" uniquement au lien principal "Basculer", mais au lieu de cela, il appis "gras" à tous les liens rouges. Pourquoi?

Veuillez noter que ce code est imbriqué avec les mêmes noms de classe. Je ne souhaite pas cibler des niveaux spécifiques avec différentes classes CSS, je souhaite cibler des éléments uniquement avec des sélecteurs descendants et d'autres opérateurs

Voici présent aussi un jsFiddle à essayer directement.

csscss-selectors
8
Luca Detomi

Je pense que vous voudrez peut-être ceci:

.toggle {
  color: red;
  font-weight: bold;
}

div *:not(.list) .toggle {
  font-weight: normal;
}
5
Mike Harrison

J'ai essayé tant de fois mais c'est la seule façon que je puisse faire:

.toggle {
  color: red;
  font-weight:bold;
}

.list .toggle{
  //override
  font-weight:normal;
}

Voici comment utiliser: pas la bonne façon: ajoutez specialToggle pour les éléments que vous do not want to select

<a href="#!" class="toggle specialToggle">SubToggle</a>

et puis css:

.toggle {
  color: red;
}

.toggle:not(.specialToggle) {
  font-weight:bold;
}

https://jsfiddle.net/s249tyur/3/

1
Jared Chu

Si la structure est toujours identique, vous pouvez utiliser le signe plus grand (>), cela signifie que vous n'appliquez le style qu'aux enfants de la classe.

.container > .toggle {
  font-weight:bold;
}

Ou si le conteneur ne va pas toujours avoir la même classe, mais est toujours un élément div, vous pouvez utiliser:

div > .toggle {
  font-weight:bold;
}
1
CamBarker

: not ne supporte pas les combinateurs CSS.

Votre seul moyen de faire ceci est: 

.toggle {
  color: red;
}

.toggle {
  font-weight:bold;
}

.list .toggle {
  /* Override previous */
}

Fiddle

1
Zeev Katz