Sélecteurs CSS utiles que vous ne connaissez peut-être pas

<p>

<p>Les sélecteurs CSS jouent un rôle essentiel dans le développement Web et sont utilisés pour le style des pages Web. Bien que de nombreuses personnes connaissent les sélecteurs courants, il existe des sélecteurs moins courants mais très utiles.

Que sont les sélecteurs CSS ?

<p>Les sélecteurs CSS sont des modèles utilisés pour sélectionner des éléments sur une page Web à des fins de style. Ils peuvent localiser des éléments en fonction d'attributs, de classes, d'identifiants, etc.

Sélecteurs CSS couramment utilisés

<p>Voici quelques sélecteurs couramment utilisés :

• Sélecteur d'éléments : Cible tous les éléments d'un type spécifique. Par exemple, pour styliser tous les éléments <div> :

<code>div {
  border: 1px solid black;
}</code>

• Sélecteur de classe : Sélectionne les éléments avec une classe spécifique. Si nous avons une classe appelée "text-large":

<code>.text-large {
  font-size: 20px;
}</code>

• Sélecteur d'ID : Cible les éléments avec un ID spécifique. Pour l'élément avec l'ID "header" :

<code>#header {
  background-color: blue;
}</code>

• Sélecteur d'attribut : utilisé pour les éléments avec des valeurs d'attribut spécifiques. Par exemple, pour styliser tous les liens externes (en utilisant l'attribut "rel") :

<code>a[rel="external"] {
  color: red;
}</code>

Sélecteurs CSS peu courants mais utiles

<h3>Sous-sélecteur (>) <p>Il localise les éléments enfants directs de l'élément. Pour les éléments parents avec la classe "conteneur" :

<code>.container > p {
  margin-left: 10px;
}</code>

<h3>Sélecteur descendant ( ) <p>Cela sélectionnera tous les descendants de l'élément. Si nous avons un div avec l'ID "main" et que nous voulons styliser tous les éléments <span> qu'il contient :

<code>#main span {
  color: green;
}</code>

<h3>Sélecteur de frères et sœurs adjacents ( ) <p>Sélectionne un élément qui suit immédiatement un autre élément spécifique. Par exemple, après l'élément <h3>, s'il y a un élément <p> :

<code>h3 + p {
  font-weight: bold;
}</code>

<h3>Sélecteur universel de frères et sœurs (~) <p>Localisez l'élément frère d'un autre élément, pas nécessairement adjacent. Si nous avons un div avec la classe « item » et que nous voulons styliser tous les éléments frères et sœurs suivants avec la classe « detail » :

<code>.item ~ .detail {
  padding-top: 5px;
}</code>

<h3>Sélecteur d'attribut avec correspondance partielle (^=, $=, *=)

• Commence par (^=) : Pour définir le style de toutes les sources d'images commençant par "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a" :

<code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
  border-radius: 5px;
}</code>

• se termine par ($=) : Pour tous les formulaires dont les méthodes se terminent par "post" :

<code>form[method$="post"] {
  background-color: #f0f0f0;
}</code>

• *contient (=)** : Pour styliser tous les liens qui contiennent "produit" dans leur attribut href :

<code>a[href*="product"] {
  text-decoration: underline;
}</code>

<h3>Pseudo-classe négative (:not()) <p>Il sélectionne les éléments qui ne correspondent pas à un certain sélecteur. Par exemple, tous les éléments sauf les éléments de classe "cachés" :

<code>:not(.hidden) {
  display: block;
}</code>

<h3>Pseudo-classe cible (:target) <p>Lorsque le fragment d'URL correspond à l'ID de l'élément. Pour la partie de l'URL avec l'ID "contact" :

<code>div {
  border: 1px solid black;
}</code>

<h3>Pseudo-classe de langage (:lang()) <p>Localisez les éléments en fonction des attributs de langue. Pour les éléments avec lang="en-US":

<code>.text-large {
  font-size: 20px;
}</code>

<h3>a une pseudo-classe (:has()) La pseudo-classe <p>:has() est utilisée pour sélectionner des éléments qui contiennent des éléments enfants ou des éléments descendants spécifiques. Par exemple, pour styliser un div contenant une image :

<code>#header {
  background-color: blue;
}</code>

<h3>Pseudo-classe de sélection (::selection) <p>Cette pseudo-classe permet de styliser la portion de texte sélectionnée par l'utilisateur. Par exemple, lorsque l'utilisateur sélectionne du texte dans un paragraphe :

<code>a[rel="external"] {
  color: red;
}</code>

Conclusion

<p>Ces sélecteurs CSS peu courants offrent des moyens supplémentaires pour positionner et styliser avec précision les éléments. Ils améliorent la flexibilité et les fonctionnalités du code CSS, le rendant plus puissant et plus efficace pour créer des pages Web visuellement attrayantes et bien structurées.

<p>Pour plus d'informations, veuillez visiter https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

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!