Sélecteurs principaux

4.1 Sélecteurs par type

Les sélecteurs en CSS sont utilisés pour déterminer les éléments auxquels les styles vont s'appliquer. Les sélecteurs principaux incluent les sélecteurs par type, par classe, par identifiant et les sélecteurs universels. Chacun de ces sélecteurs a ses propres spécificités et utilisations.

Sélecteurs par type (Type Selectors)

Les sélecteurs par type appliquent des styles à tous les éléments d'un type donné. Par exemple, on peut appliquer des styles à tous les paragraphes (<p>), titres (<h1>, <h2> etc.) ou autres balises HTML.

    
      tagname {
        propriété: valeur;
        propriété: valeur;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Ce sélecteur appliquera des styles à tous les éléments <p> du document.

Caractéristiques :

• S'applique à tous les éléments du type spécifié
• Pratique pour les styles globaux qui doivent être appliqués à tous les éléments d'un certain type

4.2 Sélecteurs par classe

Les sélecteurs par classe permettent d'appliquer des styles à un ou plusieurs éléments qui ont une certaine classe. Les classes sont définies à l'aide de l'attribut class en HTML et sont désignées par un point (.) en CSS.

Syntaxe :

    
      .classname {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Ce sélecteur appliquera des styles à tous les éléments qui ont la classe button.

Caractéristiques :

• La même classe peut être utilisée pour plusieurs éléments
• Permet d'appliquer facilement les mêmes styles à différents éléments

4.3 Sélecteurs par identifiant

Les sélecteurs par identifiant appliquent des styles à l'élément avec un identifiant unique. Les identifiants sont définis à l'aide de l'attribut id en HTML et désignés par un dièse (#) en CSS.

Syntaxe :

    
      #uniq-id {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

Ce sélecteur appliquera des styles à l'élément avec l'identifiant main .

    
      /* Sélectionne l'élément avec l'identifiant #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Cet élément aura une largeur de 800px.</div>
      <div>Cet élément ne sera pas stylisé.</div>
    
  

Caractéristiques :

• L'identifiant doit être unique sur la page
• Utilisé pour styliser des éléments uniques, tels que le titre ou le contenu principal

4.4 Sélecteurs groupés

Les sélecteurs groupés permettent d'appliquer la même règle à plusieurs éléments. Ils réduisent la quantité de code et simplifient la gestion des styles.

Syntaxe :

    
      sélecteur, sélecteur, … {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

    
      /* Sélectionne tous les éléments h1, h2 et h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Titre 1</h1>
      <h2>Titre 2</h2>
      <h3>Titre 3</h3>
      <p>Ce texte ne sera pas stylisé par cette règle.</p>
    
  

4.5 Sélecteurs universels

Les sélecteurs universels appliquent des styles à tous les éléments de la page. Ils sont désignés par un astérisque (*) et peuvent être utiles pour réinitialiser les styles ou pour appliquer des styles communs à tous les éléments.

Syntaxe :

    
      * {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple :

Ce sélecteur appliquera des styles à tous les éléments de la page, réinitialisant leurs marges et définissant le modèle de boîte.

    
      <div>Paragraphe 1</div>
      <div>Paragraphe 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Caractéristiques :

• S'applique à tous les éléments de la page
• Utile pour les réinitialisations globales de styles ou pour appliquer des styles de base à tous les éléments