CSS Pseudo-classes :: non () et: cible

Cet article explore les pseudo-classes polyvalentes CSS :not() et :target, présentant leur pouvoir en créant des styles sophistiqués et ciblés. Nous allons approfondir leurs fonctionnalités et démontrer des applications pratiques, y compris la création d'onglets sans javascript.

Concepts clés:

• Le :not() pseudo-classe agit comme un filtre, sélectionnant tous les éléments sauf ceux qui correspondent à un sélecteur donné. Cela permet une exclusion précise des éléments des règles de style.
• Le :target pseudo-classe met en évidence la section de document correspondant à un fragment d'URL spécifique (la partie après le symbole #). Cela permet de créer des éléments interactifs sans javascript.

onglets sans javascript avec :target:

En manipulant intelligemment les fragments d'URL et en :target pseudo-classe, nous pouvons créer des interfaces à onglets fonctionnelles sans compter sur JavaScript. Cliquez sur un onglet met à jour le fragment d'URL, déclenchant le style :target sur le contenu de l'onglet correspondant, ce qui en fait le calque visible.

excluant les éléments avec :not():

Le pouvoir de

:not() réside dans sa capacité à exclure les éléments des règles de style. Cependant, sa limitation actuelle d'accepter un seul argument nécessite un chaînage pour plusieurs exclusions. Par exemple, input:not([type=radio]):not([type=checkbox]):not([type=range]) sélectionne tous les éléments d'entrée sauf les boutons radio, les cases à cocher et les entrées de plage. Les spécifications futures du CSS promettent une amélioration des fonctionnalités, permettant aux arguments séparés des virgules dans :not().

Extrait de "CSS Master" par Tiffany B. Brown. Disponible en librairies et en tant que livre électronique.

Cette section explore les pseudo-classes avancées, y compris les pseudo-classes indexées par l'enfant et tapées sur l'enfant (sélectionnant des éléments par position dans l'arborescence de documents) et des pseudo-classes d'entrée (ciblage des champs de formulaire en fonction de leurs valeurs et états).

Soulignation des fragments de page:

Les identificateurs de fragments (par exemple, #top, #footnote1) sont utilisés pour la navigation en page. Le :target pseudo-classe nous permet de styliser la section correspondant à l'identifiant de fragment actuel sans javascript. Par exemple:

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

Ce styles commente avec un fond jaune lorsque leur identifiant correspond au fragment URL.

Création d'onglets CSS uniquement:

Le :target pseudo-classe est la clé pour créer des onglets sans javascript. En définissant les valeurs z-index basées sur l'état :target, nous nous assurons que seule l'onglet sélectionné est visible.

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div>

Conseil d'accessibilité: Pour une meilleure accessibilité, envisagez d'utiliser JavaScript pour gérer aria-hidden Attributs.

:not() en action:

La pseudo-classe :not() est démontrée par les étiquettes de formulaire de style, à l'exclusion de ceux avec la classe label-radio.

[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }

chaînage :not() est crucial lors de l'exclusion de plusieurs types d'éléments, comme indiqué ci-dessous:

label:not(.label-radio) {
  font-weight: bold;
  display: block;
}

Cela cible efficacement tous les types d'entrée sauf radio, case à cocher et plage.

FAQS sur :not() Sélecteur:

Cette section fournit des réponses aux questions courantes concernant le sélecteur :not(), couvrant sa fonctionnalité, sa prise en charge du navigateur et l'utilisation avec divers sélecteurs CSS. Les réponses sont similaires à celles du texte d'origine, mais reformulé pour plus de clarté et de concision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!