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

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 ?

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

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> : <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>Sélecteur de classe</strong> : Sélectionne les éléments avec une classe spécifique. Si nous avons une classe appelée "text-large": </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>Sélecteur d'ID</strong> : Cible les éléments avec un ID spécifique. Pour l'élément avec l'ID "header" : </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>Sélecteur d'attribut</strong> : 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") : </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="Sélecteurs-CSS-peu-courants-mais-utiles">Sélecteurs CSS peu courants mais utiles</h2> <h3 id="Sous-sélecteur-gt">Sous-sélecteur (>)</h3> <p>Il localise les éléments enfants directs de l'élément. Pour les éléments parents avec la classe "conteneur" : </p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="Sélecteur-descendant">Sélecteur descendant ( )</h3> <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 <code><span></span> qu'il contient :

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

  Sélecteur de frères et sœurs adjacents ( )

  Sélectionne un élément qui suit immédiatement un autre élément spécifique. Par exemple, après l'élément <h3></h3>, s'il y a un élément <p></p> :

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

  Sélecteur universel de frères et sœurs (~)

  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>

  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>

  Pseudo-classe négative (:not())

  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>

  Pseudo-classe cible (:target)

  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>

  Pseudo-classe de langage (:lang())

  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>

  a une pseudo-classe (:has())

  La pseudo-classe

  :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>

  Pseudo-classe de sélection (::selection)

  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

  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.

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