CSS

Sélecteurs CSS : identifier les éléments HTML auxquels appliquer des styles

Sélecteurs CSS : Identifier les éléments HTML auxquels appliquer des styles


Les sélecteurs CSS sont des motifs qui permettent de cibler et de sélectionner des éléments HTML spécifiques afin de leur appliquer des styles de présentation. Comprendre les différents types de sélecteurs CSS est essentiel pour contrôler l'apparence de votre site Web.


1. Sélecteurs de type :


Les sélecteurs de type ciblent tous les éléments d'un certain type sur une page. Par exemple, le sélecteur p cible tous les paragraphes <p> dans le document HTML.


Exemple :


p { 
  color: blue; 
}


2. Sélecteurs de classe :


Les sélecteurs de classe ciblent les éléments qui ont une classe spécifique attribuée dans le code HTML. Vous pouvez réutiliser la même classe sur plusieurs éléments.


Exemple :


<p class="important">Ce paragraphe est important.</p>


.important { 
  font-weight: bold; 
}


3. Sélecteurs d'ID :


Les sélecteurs d'ID ciblent un élément HTML spécifique avec un attribut ID unique. Chaque ID doit être unique dans le document.


Exemple :


<div id="header">Contenu de l'en-tête</div>


#header { 
  background-color: gray; 
}


4. Sélecteurs de descendant :


Les sélecteurs de descendant ciblent des éléments HTML spécifiques qui sont des descendants directs ou indirects d'autres éléments.


Exemple :


<ul id="menu">
  <li>
    <a href="#">Accueil</a>
  </li>
</ul>


#menu li { 
  list-style-type: none; 
}


5. Sélecteurs d'attribut :


Les sélecteurs d'attribut ciblent des éléments HTML en fonction de leurs attributs ou de leurs valeurs d'attribut spécifiques.


Exemple :


<a href="https://www.example.com">Lien vers Example</a>


a[href="https://www.example.com"] { 
  color: green; 
}


En utilisant ces sélecteurs CSS, vous pouvez cibler et styliser précisément les éléments HTML de votre page Web. En combinant différents types de sélecteurs, vous avez un contrôle total sur l'apparence de votre site.


420 vues
Posté le 22 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
2 869 vues
Comprendre les différentes catégories de commandes SQL
SQL, ou Structured Query Language, est composé de plusieurs catégories de commandes, chacune ayant un rôle spécifique dans la manipulation et la gestion des bases de données relationnelles. Les...
SQL
201 vues
Retour de valeurs
Retour de Valeurs dans les Fonctions en JavaScriptLorsqu'une fonction est exécutée, elle peut renvoyer une valeur à l'endroit où elle a été appelée. Cette valeur peut être utilisée pour...
JS
2 467 vues
Barre de menu intelligente
Vous en avez marre de dupliquer votre code afin d'ajouter un nouveau lien sur votre barre de menus ?Alors dans cette vidéo vous allez apprendre à vous simplifier la vie en utilisant la fonction...
Créer son site de rencontres
1 339 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
274 vues
Tableaux indexés
Les tableaux indexés en PHP sont des structures de données qui permettent de stocker plusieurs valeurs dans une seule variable. Chaque valeur est associée à un indice numérique, à partir de...
PHP
17 136 vues
Se connecter à une base de données en PHP
La première étape avant de se lancer dans la conception de son site et de créer une connexion directe avec sa base de données si vous avez besoin de stocker des données par la suite.Nous allons...
Créer son site
15 235 vues
Modifier un profil PHP
Après avoir créé notre page profil, nous allons créer une nouvelle page afin de modifier certaines données de l'utilisateur !La modification d'un profil se fait également par un...
Créer son site
257 vues
Comment ces propriétés affectent le positionnement et la mise en page des éléments
Impact des Propriétés de Marge, Bordure, Rembourrage, Largeur et Hauteur sur le Positionnement et la Mise en Page des ÉlémentsEn CSS, les propriétés de marge, bordure, rembourrage, largeur et...
CSS
Publicité
Cette pub permet au site de vivre ...